Bootstrap4 Navigation

Bootstrap provides a quick and easy way to create basic navigation components, such as tabs and pills, which are very flexible and aesthetically pleasing. All navigation components (tabs and pills) of Bootstrap share the same basic markup and styles through the basic .nav class.

If you want to create a simple horizontal navigation bar, you can add .nav class, add .nav to each <li> option-item class, add .nav to each link-link class:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Navigation</h2>
　　<p>Simple horizontal navigation:</p>
　　<ul class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Navigation alignment method

.justify-content-The 'center' class sets the navigation to be displayed in the center, .justify-content-Set navigation to the right alignment with the 'end' class.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Navigation</h2>
　　<p>Align navigation to the left (default):</p>
　　<ul class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
　　
　　<p class="text-center">Center-aligned Navigation:</p>
　　<ul class="nav justify-content-center">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
　　　　
　　<p class="text-right">Right-aligned Navigation:</p>
　　<ul class="nav justify-content-end">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Vertical Navigation

.flex-The column class is used to create vertical navigation:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Vertical Navigation</h2>
　　<p>.flex-column class is used to create vertical navigation:</p>
　　<ul class="nav flex-column">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Tab

Use .nav-The tabs class can be used to convert navigation into tabs. Then use the .active class to mark the selected option.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Tab</h2>
　　<p>Tab Navigation:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Active</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Pill Navigation

.nav-The pills class can be used to set the navigation items to be in a pill shape.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Pill</h2>
　　<p>Pill Navigation:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Active</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Equal Width Navigation

.nav-The justified class can be used to set the navigation items to be displayed in equal width.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Equal Width Navigation</h2>
　　<p>.nav-The justified class can be used to set the navigation items to be displayed in equal width./p>
　　<ul class="nav nav-pills nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Active</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</ul><br>
　　<p>Justified tabs:</p>
　　<ul class="nav nav-tabs nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Active</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Pill Dropdown Menu

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Pill Navigation with Dropdown Menu</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Active</<a>
　　　　</<li>
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</<a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Link　1</<a>
　　　　　　　　<a class="dropdown-item" href="#">Link　2</<a>
　　　　　　　　<a class="dropdown-item" href="#">Link　3</a></div>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Tab Dropdown Menu

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Tab Dropdown Menu</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Active</<a>
　　　　</<li>
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</<a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Link　1</<a>
　　　　　　　　<a class="dropdown-item" href="#">Link　2</<a>
　　　　　　　　<a class="dropdown-item" href="#">Link　3</a></div>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabled</<a>
　　　　</<li>
　　</<ul>
</div>
</body>
</html>

Test and See ‹/›

Dynamic Tabs

If you want to set the tabs to be dynamically switchable, you can add data-toggle="tab" attribute. Then add .tab to the content above each option-pane class.

If you want to have a fade-in effect, you can add it in the .tab-append after pane 　 .fade class:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Tab Switch</h2>
　　<br>
　　<!--　Nav tabs　-->
　　<ul class="nav nav-tabs" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab" href="#home">Home</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu"}1">Menu　1</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu"}2">Menu　2</<a>
　　　　</<li>
　　</<ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-<pane active><br>
　　　　　　<h2<HOME>/h2>
　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>/p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Test and See ‹/›

Capsule dynamic tabs

For capsule dynamic tabs, just change the data-toggle Attribute set to data-toggle="pill":

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Capsule tab switch</h2>
　　<br>
　　<!--　Nav pills　-->
　　<ul class="nav nav-pills" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="pill" href="#home">Home</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu1">Menu　1</<a>
　　　　</<li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu2">Menu　2</<a>
　　　　</<li>
　　</<ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-<pane active><br>
　　　　　　<h2<HOME>/h2>
　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>/p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Test and See ‹/›

Bootstrap4 Navbar Bootstrap4 Collapse

Bootstrap4 Basic Tutorial

Bootstrap4 Navigation

Navigation alignment method

Vertical Navigation

Tab

Pill Navigation

Equal Width Navigation

Pill Dropdown Menu

Tab Dropdown Menu

Dynamic Tabs

Capsule dynamic tabs