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>

Powered  by Codersarts