BootStrap Nav Bar
Using the Bootstrap .nav class to create a basic navigation menu.
Ex.
……
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<nav class="nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>
</div>
</body>
Alignment of Nav Items
Use class .justify-content-center to align nav items to center.
Syntax:
<nav class="nav justify-content-center">
to align center.
Similar align nav items to right using the class .justify-content-end.
Align nav items to right vertically use flex class .flex-column
Creating the Basic nav Tabs
Add the class .nav-tabs to the basic nav.
Syntax:
<nav class="nav nav-tabs">
Add icons to your tab items add class
Syntax:
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active"> <i class="fa fa-home"></i> Home </a>
</nav>
Pills Nav
Use class .nav-pills on the basic nav instead of class .nav-tabs. you can also add icons to your pills nav.
Syntax:
<nav class="nav nav-pills">
Vertically nav
Apply the class .flex-column on the .nav element to make the pills nav appear vertically stacked
Syntax:
<nav class="nav nav-pills flex-column">
<a href="#" class="nav-item nav-link active"> <i class="fa fa-home"></i> Home </a>
...
</nav>
Tabs and Pills Nav with Dropdown Menus
The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu and .dropdown-item are required in addition to the .nav, .nav-tabs or .nav-pills classes to create a simple dropdown menu inside the nav without using any JavaScript code.
Ex.
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Home</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
</nav>
Creating pills dropdown using pills
Syntax:
<nav class="nav nav-pills">
Add above code here for dropdown.
</nav>
Fill and Justify Nav
Use to fill all available space with justify.
Using the class .nav-fill on the .nav element.
Syntax:
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link active">Explore Products</a>
<a href="#" class="nav-item nav-link">Contact Us</a>
</nav>
Use the class .nav-justified instead of.nav-fill, if you want nav that fills all horizontal space as well as every nav item has the same width.
Syntax:
<nav class="nav nav-pills nav-justified">
Search Form inside Navbar
Syntax:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Products</a>
</div>
<form class="form-inline ml-auto">
<input type="text" class="form-control mr-sm-2" placeholder="Search"> <button type="submit" class="btn btn-outline-light">Search</button> </form>
</div>
</nav>
Color Scheme of Navbars
Change the color scheme of the navbar by using the .navbar-light for the light background colors, or .navbar-dark for the dark background colors. Then, customize it with the background-color utility classes, such as .bg-dark, .bg-primary, and so on.
Syntax:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
Or
<nav class="navbar navbar-light" style="background-color: #ddeeff;">
<!--Navbar content -->
</nav>
Other class like- class="navbar navbar-dark bg-primary"
Creating Fixed, Top and Bottom navbar
Use class .fixed-top to the .navbar element to fix the navbar at the top.
Syntax:
For Top-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<! Add code here -->
</nav>
Use class .fixed-bottom on the .navbar element to fix the navbar at the bottom.
Syntax:
For Bottom-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom">
<! Add code here -->
</nav>
Creating Sticky top navbar
Creating Sticky top navbar that scrolls with the page.
Using the .sticky-top class on the .navbar element.
Syntax:
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<!—Add code here -->
</nav>