I almost copied the code from their website. The tab is initiated perfectly, and when I click on tabs, new panels are activated. However, the "active" class is not applied to the activated tab.
This is the code:
<ul class="nav nav-tabs">
<li data-toggle="tab" data-target="#a" class="active">a</li>
<li data-toggle="tab" data-target="#b" >b</li>
<li data-toggle="tab" data-target="#c" >c</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="a"> in tab a </div>
<div class="tab-pane fade" id="b">in tab b</div>
<div class="tab-pane fade" id="c">in tab c</div>
</div>
According to the Docs you need to put an id on each link in the header and that link needs to be inside the li which should have no other styles, i.e doesn't need all the data-target stuff in the li. Your list has with no data-toggle or id.
Your HTML would be like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">AAA</div>
<div class="tab-pane" id="b">BBB</div>
<div class="tab-pane" id="c">CCC</div>
<div class="tab-pane" id="d">DDD</div>
</div>
And you shouldn't need any Javascript, according to the Docs
Make sure your jquery is inserted BEFORE bootstrap js file:
<script src="jquery.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
In my case, I have two elements with the same id. I could not notice the cause of problem for a long time, because the first such element was hidden.
This will work
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
My problem was that I sillily concluded bootstrap documentation is the latest one.
If you are using Bootstrap 4, the necessary working tab markub is: http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
<ul>
<li class="nav-item"><a class="active" href="#a" data-toggle="tab">a</a></li>
<li class="nav-item">b</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">a</div>
<div class="tab-pane" id="b">b</div>
</div>
My problem was with extra </div> tag inside the first tab.
for some weird reason bootstrap tabs were not working for me until i was using href like:-
<li class="nav-item"><a class="nav-link" href="#a" data-toggle="tab">First</a></li>
but it started working as soon as i replaced href with data-target like:-
<li class="nav-item"><a class="nav-link" data-target="#a" data-toggle="tab">First</a></li>
In my case we were setting the div id as a number and setting the href="#123", this did not work.. adding a prefix to the id helped.
Example:
This did not work-
<li> <a data-toggle="tab" href="##i"> <li/>
...
<div class="tab-pane" id="##i">
This worked:
<li><a data-toggle="tab" href="#prefix#i"><li/>
...
<div class="tab-pane" id="#prefix#i">
One more thing to check for this issue is html tag attribute id. You should check any other html tags in that page have the same id as nav tab id.
When I removed the smooth scroll script (https://github.com/cferdinandi/smooth-scroll), it worked.
When I moved the following lines from the head section to the end of the body section it worked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
In my case (dynamically generating the sections): the issue was a missing "#" in href="#...".
For anyone struggling with this issue using bootstrap3 use the below classlist. If you've copy pasted from the DOC, It won't surely work. Becasue of the .show in new version.
<div class="tab-pane fade in active" >
<div class="tab-pane fade in" >
Use this for your code
<ul class="nav nav-tabs" style="margin-top:10em;">
<li class="active" data-toggle="tab">Assign</li>
<li data-toggle="tab">Two</li>
<li data-toggle="tab">Three</li>
Related
I have had a search and cannot find this exact problem so I hope the question is not duplicate.
First time users of Bootstrap 3.
From reading here and the bootstrap documentation I believe the navbar should have its own container such as:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Services</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">content goes here and this content is under the navbar</div>
</div>
The body of the page then has its own container. Is that Correct?
I have done that and then added a row but the first row content is under the navbar.
Have I missed something like a class that I should add to the first row to ensure it starts below the navbar and not after it?
I found a similar question where the answer was to ensure the navbar had "navbar-fixed-top" but I already have that.
Read documentation carefully.
According to Bootstrap navbar docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px; // Your navbar height
}
Make sure to include this after the core Bootstrap CSS.
If I understand your problem correctly that you want content below the navbar just write
navbar-fixed
instead of
navbar-fixed-top
like this
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-
fixed"role="navigation">
it will work
see this fiddle fiddle
are you looking for this ???
This is caused by the Bootstrap class fixed-top, Fixed navbars use position: fixed, which pulls the Nav from the normal flow of the DOM.
For this to have an effect, having your content below the Navbar not overflow unto the Navbar, BootStrap Docs>> https://getbootstrap.com/docs/4.5/components/navbar/
Under the #Placement section, advise you to give custom CSS to the body.
Add some padding to the <body style="padding: somepadding"> element.
So there is my problem. I'm working to a project and intitally was made with bootstrap 2. Now i want to change the codesto bootstrap 3, but i've encountered some issues. Can someone help me to change the following part?
<body>
<div class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
Brand
<nav class="pull-right">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div><!-- end navbar inner -->
</div><!-- end navbar -->
<div class="hero-unit-inner text-center">
<h1>Text</h1>
<h4>Text </h4>
Get Started
<a href="#" >Learn More</a>
<img src="img/browser.png">
</div>
</div><!-- end of container -->
</div><!-- end jumbotron -->
</body>
Here is the Bootstrap 3 code:
<div class="container-fluid">
<div class="jumbotron">
<div class="container">
<div class="navbar">
Brand
<nav class="pull-xs-right">
<ul class="nav">
<li class="nav-item">Home
</li>
<li class="nav-item">About Us
</li>
<li class="nav-item">Services
</li>
<li class="nav-item">Blog
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
<!-- end navbar inner -->
</div>
<!-- end navbar -->
<div class="hero-unit-inner text-xs-center">
<h1>Text</h1>
<h4>Text </h4>
Get Started
Learn More
<img src="img/browser.png" />
</div>
</div><!-- end jumbotron -->
</div><!-- end of container -->
http://getbootstrap.com/migration/ for a list of class changes, depredations etc.
Sorry I must have missed that one... It becomes "jumbrotron". See the link I shared so you can match up the classes. http://getbootstrap.com/migration/
Yes it's CSS. Keep in mind that some classes have changed while other have been deprecated.
If you used a theme to build your site with, then I advise having a look at the site where you downloaded the template as in most cases they update the templates...
I tried to setup bootstrap tabs without javascript (like written here: http://getbootstrap.com/javascript/#markup).
Code copied from bootstrap page:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Tab 1</div>
<div role="tabpanel" class="tab-pane" id="profile">Tab 2</div>
<div role="tabpanel" class="tab-pane" id="messages">Tab 3</div>
<div role="tabpanel" class="tab-pane" id="settings">Tab 4</div>
</div>
</div>
https://jsfiddle.net/Zoker/w6xeyznk/
As you can see, it does not work and I don't know why. Anybody got an idea?
Have you included the jquery.js and the bootstrap.js it's important for work because you don't have to code the js part but bootstap already have it.
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
I am building a CMS editor and one of the things that can be customized is the text appearing in the Navbar. I am having a problem with showing two Navbars. Most examples i have seen are multiple Navbars one below the other and is not what i need.
I need the first Navbar to be the editor's own Navbar, while the second Navbar is somewhere below the first Navbar but not directly below it.
You have to remove navbar-fixed-top from the second nav
html would be like this
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Conent</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<div class="navbar ">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
in bootply
I am creating a responsive design in bootstrap3.
I want to modify my template design for tabs. And for that I am using a external js file.
For now I am planning to show them in only desktop version. I am not sure how to have same kind of effect in mobile. SO for now just dektop.
When I am integrating with Bootstrap3 responsive its not working.
However with a plain html file without bootstrap code its working fine.
Would anyone be able to help me to achieve this using Bootstrap3?
I have added the code in js fiddle #
http://jsfiddle.net/monicaRegal/do5b3ko3/1/
Thank You
Regards,
Monica Mandal
If you're needing tabs made with Bootstrap to expand to the full width of the page or their container, use the nav-justified class in your markup.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Body Content Here
<br />
<br />
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">The Americas</li>
<li role="presentation">Europe</li>
<li role="presentation">Middle East/Africa</li>
<li role="presentation">Asia/Pacific</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">The Americas content</div>
<div role="tabpanel" class="tab-pane" id="profile">Europe content</div>
<div role="tabpanel" class="tab-pane" id="messages">Middle East/Africa content</div>
<div role="tabpanel" class="tab-pane" id="settings">Asia/Pacific content</div>
</div>
</div>
You can then style your tabs however you need. View the snippet in full page mode to see it properly.