Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
So I have this website that uses a bootstrap grid system and which works 100% perfectly on firefox but not properly on google chrome or safari.
How is this so?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
</ul>
</div>
<div class="container">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="index">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="INDEX">...</div>
</div>
</div>
</div>
</body>
</html>
Firefox:
Google chrome and safari:
UPDATE
Edited the post with the complete HTML.
According to Bootstrap 3 documentation, there's an error with justified navs "in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing". Perhaps that produces a conflict between elements, make some changes to see if your problem goes into that direction.
Please keep us updated and/or confirm if you have already found a solution. Best regards!
I'm new to Twitter Bootstrap framework and CSS.
I want my right sidebar height to go along with the height of my main content. How should I do that.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="includes/Bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/Bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="container">
<div class="container-fluid">
<header class="margin-top">
<div class="row-fluid">
<img border=0 src="images/header.jpg" alt="">
</div>
</header>
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Home</li>
<li>Contact </li>
<li>About Us</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
If I have a long content here.. The sidebar does not follow the height of the content.
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div>
</div>
</body>
</html>
your container seems to be fine and has a auto height so what is the problem
here you see the fiddle
http://jsfiddle.net/cancerian73/ZpZCD/
.container {background-color:#fc0;}
I'm building a site with the latest Twitter Bootstrap using the responsive features.
My problem is that I have two lists that appear side by side, but when the viewport width is less than 768px wide they appear stacked despite there being enough space for both of them to fit. How can I fix this?
Also, a couple of minor things: In the footer I have a strange A symbol appearing before the copyright symbol...how do I sort this out? Also, in IE two elements don't appear inline like they do on all other browsers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><strong>HOME</strong></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><strong>GALLERY</strong></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><strong>ABOUT US</strong></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><strong>CONTACT</strong></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
The CSS is here: http://gw.gd/Ooky
Thanks in advance.
As #Omega noted, the stacking of columns <768px is the default Bootstrap behaviour. You can override this with some custom CSS though. Here's a post with a similar question: Stack elements in twitter bootstrap media grid differently
Regarding the strange symbol in your footer, start by checking that your header includes:
<meta charset="UTF-8">
Good luck!
I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below is the only code I am using. All the other CSS/JS scripts are copied from Twitter Bootstrap framework.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".tabs").tabs();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>
You need to add tabs plugin to your code
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
Well, it didn't work. I made some tests and it started working when:
moved (updated to 1.7) jQuery script to <head> section
added data-toggle="tab" to links and id for <ul> tab element
changed $(".tabs").tabs(); to $("#tabs").tab();
and some other things that shouldn't matter
Here's a code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
The key elements include:
the class="nav nav-tabs" and data-tabs="tabs" of ul
the data-toggle="tab" and href="#orange" of the a
the class="tab-content" of the div of the content
the class="tab-pane" and id of the div of the items
The complete code is as below:
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
Had a problem with Bootstrap tabs recently following their online guidelines, but there's currently an error in their markup example data-tabs="tabs" is missing on <ul> element. Without it using data-toggle on links doesn't work.
I have the same problem, but above some answers might be tricky for me.
I found the other answer maybe solve your question Twitter Bootstrap Js (tabs, popups, dropdown) not working in Drupal
place jquery.js before bootstrap.tab.js
You're missing the data-toggle="tab" data-tag on your menu urls so your scripts can't tell where your tab switches are:
HTML
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
I just fixed this issue by adding data-toggle="tab" element in anchor tag
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
and
added the following in head section
http://code.jquery.com/jquery-1.7.1.js'>
I tried the codes from bootstrap's document as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab demo</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
and it works.
But when I switch these two <script src...>'s postion, it do not work. So please remember to load your jquery script before bootstrap.js.
For me, the problem was that I wasn't including bootstrap.min.css (I was only including bootstrap-responsive.min.css).
Actually, there is another easy way to do it. It works for me but I'm not sure for you guys.
The key thing here, is just adding the FADE in each (tab-pane) and it will works. Besides, you don't even need to script function or whatever version of jQuery.
Here is my code...hope it will works for you all.
<div class="tab-pane fade" id="Customer">
<table class="table table-hover table-bordered">
<tr>
<th width="40%">Contact Person</th>
<td><?php echo $event['Event']['e_contact_person']; ?></td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="Delivery">
<table class="table table-hover table-bordered">
<tr>
<th width="40%">Time Arrive Warehouse Start</th>
<td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
</tr>
</table>
</div>
This solved it when none of the other examples did:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
i had the same problem until i downloaded bootstrap-tab.js and included it in my script, download from here https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc/bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027
include the bootsrap-tab.js in the just below the jquery
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
Final Code Looked like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
Since i'm working with Bootstrap Javascript Modules instead of loading the entire Bootstrap Javascript, my tabs were not working because i forgot to load load/include/ the node_modules/bootstrap/js/tab.js file.
After including it, it worked...
Good Luck
Just copy the script tag for adding the bootstrap.js from the head section to the end of the body. Then everything should work fine even without the scripts to activate the tabs.