<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a hre ="#">BOOTSTRAP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JQUERY</a></li>
</ul>
</div>
</body>
</html>
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.</div>
If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#HTML5">HTML5</a></li>
<li><a data-toggle="tab" href="#CSS3">CSS3</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">MORE TUTORIALS<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#JAVASCRIPT">JAVASCRIPT</a></li>
<li><a data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="HTML5" class="tab-pane fade in active">
<h3>HTML5</h3>
<p>HTML5 (No space between "HTML" and "5")is a markup language
used for structuring and presenting content on the World Wide Web.
It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML
5.1 Candidate Recommendation on 21 June 2016. The World Wide Web
Consortium (W3C) to improve the language with support for the latest
multimedia, while keeping it both easily readable by humans and
consistently understood by computers and devices such as web browsers.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and
Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3" class="tab-pane fade">
<h3>CSS3</h3>
<p>The CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001.
but it was initially declared early in the June 1999. The main difference
between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
Color.</p>
</div>
<div id="JAVASCRIPT" class="tab-pane fade">
<h3>JAVASCRIPT</h3>
<p>JavaScript is the programming language of the Web. Javascript Most commonly
used websites this is client-side script to interact with the user and make
dynamic pages. All modern web browsers on desktops, tablets, and smart phones
are using JavaScript. JavaScript is part of the triad of technologies that all
Web developers must learn: HTML(Hyper Text Markup Language) to specify the
content of web pages, CSS(Cascading Style Sheets) to specify the presentation
of web pages, and JavaScript to specify the behavior of web pages.</p>
</div>
<div id="BOOTSTRAP" class="tab-pane fade">
<h3>BOOTSTRAP</h3>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Tab Pills</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#HTML5">HTML5</a></li>
<li><a data-toggle="tab" href="#CSS3">CSS3</a></li>
<li><a data-toggle="tab" href="#JAVASCRIPT">JAVASCRIPT</a></li>
<li><a data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a></li>
</ul>
<div class="tab-content">
<div id="HTML5" class="tab-pane fade in active">
<h3>HTML5</h3>
<p>HTML5 (No space between "HTML" and "5")is a markup language
used for structuring and presenting content on the World Wide Web.
It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML
5.1 Candidate Recommendation on 21 June 2016. The World Wide Web
Consortium (W3C) to improve the language with support for the latest
multimedia, while keeping it both easily readable by humans and
consistently understood by computers and devices such as web browsers.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and
Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3" class="tab-pane fade">
<h3>CSS3</h3>
<p>The CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001.
but it was initially declared early in the June 1999. The main difference
between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
Color.</p>
</div>
<div id="JAVASCRIPT" class="tab-pane fade">
<h3>JAVASCRIPT</h3>
<p>JavaScript is the programming language of the Web. Javascript Most commonly
used websites this is client-side script to interact with the user and make
dynamic pages. All modern web browsers on desktops, tablets, and smart phones
are using JavaScript. JavaScript is part of the triad of technologies that all
Web developers must learn: HTML(Hyper Text Markup Language) to specify the
content of web pages, CSS(Cascading Style Sheets) to specify the presentation
of web pages, and JavaScript to specify the behavior of web pages.</p>
</div>
<div id="BOOTSTRAP" class="tab-pane fade">
<h3>BOOTSTRAP</h3>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Verticla Tabs and Pills</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Vertical Tabs</h3>
<div class="row">
<div class="col-md-3">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#HTML5">HTML5</a></li>
<li><a data-toggle="tab" href="#CSS3">CSS3</a></li>
<li><a data-toggle="tab" href="#JAVASCRIPT">JAVASCRIPT</a></li>
<li><a data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div id="HTML5" class="tab-pane fade in active">
<h3>HTML5</h3>
<p>HTML5 (No space between "HTML" and "5")is a markup language
used for structuring and presenting content on the World Wide Web.
It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML
5.1 Candidate Recommendation on 21 June 2016. The World Wide Web
Consortium (W3C) to improve the language with support for the latest
multimedia, while keeping it both easily readable by humans and
consistently understood by computers and devices such as web browsers.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and
Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3" class="tab-pane fade">
<h3>CSS3</h3>
<p>The CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001.
but it was initially declared early in the June 1999. The main difference
between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
Color.</p>
</div>
<div id="JAVASCRIPT" class="tab-pane fade">
<h3>JAVASCRIPT</h3>
<p>JavaScript is the programming language of the Web. Javascript Most commonly
used websites this is client-side script to interact with the user and make
dynamic pages. All modern web browsers on desktops, tablets, and smart phones
are using JavaScript. JavaScript is part of the triad of technologies that all
Web developers must learn: HTML(Hyper Text Markup Language) to specify the
content of web pages, CSS(Cascading Style Sheets) to specify the presentation
of web pages, and JavaScript to specify the behavior of web pages.</p>
</div>
<div id="BOOTSTRAP" class="tab-pane fade">
<h3>BOOTSTRAP</h3>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
</div>
</div>
</div>
</div>
<hr /><hr />
<h3>Vertical Tab Pills</h3>
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="tab" href="#HTML5-2">HTML5</a></li>
<li><a data-toggle="tab" href="#CSS3-2">CSS3</a></li>
<li><a data-toggle="tab" href="#JAVASCRIPT-2">JAVASCRIPT</a></li>
<li><a data-toggle="tab" href="#BOOTSTRAP-2">BOOTSTRAP</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div id="HTML5-2" class="tab-pane fade in active">
<h3>HTML5</h3>
<p>HTML5 (No space between "HTML" and "5")is a markup language
used for structuring and presenting content on the World Wide Web.
It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML
5.1 Candidate Recommendation on 21 June 2016. The World Wide Web
Consortium (W3C) to improve the language with support for the latest
multimedia, while keeping it both easily readable by humans and
consistently understood by computers and devices such as web browsers.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and
Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3-2" class="tab-pane fade">
<h3>CSS3</h3>
<p>The CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001.
but it was initially declared early in the June 1999. The main difference
between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
Color.</p>
</div>
<div id="JAVASCRIPT-2" class="tab-pane fade">
<h3>JAVASCRIPT</h3>
<p>JavaScript is the programming language of the Web. Javascript Most commonly
used websites this is client-side script to interact with the user and make
dynamic pages. All modern web browsers on desktops, tablets, and smart phones
are using JavaScript. JavaScript is part of the triad of technologies that all
Web developers must learn: HTML(Hyper Text Markup Language) to specify the
content of web pages, CSS(Cascading Style Sheets) to specify the presentation
of web pages, and JavaScript to specify the behavior of web pages.</p>
</div>
<div id="BOOTSTRAP-2" class="tab-pane fade">
<h3>BOOTSTRAP</h3>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When showing a new tab, the events fire in the following order:
1. hide.bs.tab
- Current active tab
2. show.bs.tab
- Shown tab
3. hidden.bs.tab
- Previous active tab, the same one as for the hide.bs.tab
event
4. shown.bs.tab
- Newly active just-shown tab
Event | Description | Example |
---|---|---|
show.bs.tab | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
e.target // activated tab e.relatedTarget // previous tab }) |
shown.bs.tab | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab e.relatedTarget // previous tab }) |
hide.bs.tab | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
$('a[data-toggle = "tab"]').on('hide.bs.tab', function (e) {
e.target // activated tab e.relatedTarget // previous tab }) |
hidden.bs.tab | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
$('a[data-toggle = "tab"]').on('hidden.bs.tab', function (e) {
e.target // activated tab e.relatedTarget // previous tab }) |