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>
Related
I have checked my code up and down and cannot find the problem. I do not see any typos or other errors. Can someone please let me know where I went wrong? I just want the tabs at the bottom to be visible and interactive as they should. Any help would be greatly appreciated.
<!-- Main -->
<section id="section">
<div class="container">
<div class="row">
<div class="col-6">
<img src="/mainpic.PNG" alt="Volcano"
class="img-fluid" >
</div>
<div class="div col-6">
<div id="myCarousel" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="div container">
<h1>Activity</h1>
<p>Fun DIY activites that will entertain and educate your little ones</p>
</a>
</div>
</div>
<div class="carousel-item">
<div class="div container">
<h1>Activity</h1>
<p>Fun DIY activites that will entertain and educate your little ones</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I'm assum your are using Bootstrap v5.2+. As Bootstrap v5+, data-bs-ride instead of data-ride, On the carouse indicator, data-bs-target instead of data-target. you just change data-target to data-bs-target and data-ride to data-bs-ride to fix it.
you can visit this demo: https://fastbootstrap.com/components/carousel/#with-indicators
I am movig a project from Bootstrap 3 to Bootstrap 4...
the following code was working fine w Bootstrap 3 , but it's not with Bootstrap 3...
here is the jsFiddle test and the html code
Boostrap3 behavior :
initial button 1 is active
when the user click on one of the 3 buttons, it displays the corresponding tab. And the button is raised up, the other buttons stay down.
Boostrap 4 behavior :
initial button 1 is active
when the user click on one of the 3 buttons, it displays the corresponding tab. And the button is raised up, the other buttons never go down.. they stay active...
<section id="memberships" class="memberships">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="header-text">TEST</h2>
<div class="memberships-mockup">
<div id="nav-tabContent" class="tab-content">
<div id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab" class="tab-pane fade show active"><p>1111111111</p></div>
<div id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab" class="tab-pane fade"><p>2222222222</p></div>
<div id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab" class="tab-pane fade"><p>3333333333</p></div>
</div>
</div>
</div>
</div>
<div id="myTab" role="tablist" class="nav nav-tabs">
<div class="row">
<div class="col-sd-4">
<a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
</div>
<div class="col-sd-4">
<a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
</div>
<div class="col-sd-4">
<a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
</div>
</div>
</div>
</div>
</section>
If you want the nav-tabs behavior to work properly in Bootstrap 4, each tab should be a direct sibling, not in separate columns.
https://www.codeply.com/go/Wu5OKQvDiQ
<div id="myTab" role="tablist" class="nav nav-tabs">
<a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
<a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
<a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
</div>
um developing a website and that should has few tabs according to my dream,
but thing is when I click a tab it shows only contents which is between heading tag,not P tags,
Here's my code.please help me to fulfill my dream :-D
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text</p>
</div>
</div>
</div>
</div>
I think you were missing the jQuery link.
The code works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text in p</p>
</div>
</div>
</div>
</div>
Output :
You need to Enable tabbable tabs via JavaScript
<script>
$('.nav-pills a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</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
So I wish to target slides with the indicators in Twitter-Bootstrap-3 but having some difficulty in doing so.
Here is my code:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" data-id="1">
<img src="/assets/example/bg_suburb.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><small>This is an example layout with carousel that uses the Bootstrap 3 styles.</small></p>
</p></div>
</div>
</div>
<div class="item" data-id="2">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="item" data-id="3">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<script>
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
$('#myCarousel').carousel($(this).data('slide-to')-1);
});
</script>
I need to change the indicators to words of my choosing and also add captions to each slide not siting on top of the slide so the indicators to be underneath the carousel with the caption underneath the indicators too. I have tried all manners of things but getting nowhere.