how to create navbar in bootstrap

letskillsup


how to create navbar in bootstrap



how to create navbar in Bootstrap

A. first of all, let's understand the navbar container


there are four compulsory classes must be used for the main container of the navbar

1. navbar

2.navbar-expand-(lg/md/sm/xl/xxl)

3. navbar-light(dark or primary or light)

4. bg-light(light or dark or primary)

code:

<div class="navbar navbar-expand-lg navbar-light bg-light">                    

                </div>


B. then we need to create some components in the navbar which are as follows:

1. navbar-brand(logo)

2. navbar-toggler(button)

3.navbar-nav(links)


i. how to create navbar-brand?

The navbar-brand class creates a brand section in the navbar using Bootstrap.

code:


code:

<div class="navbar navbar-expand-lg navbar-light bg-light">                    

                    <div class="navbar-brand">

                            text or image

                    </div>

                </div>

                


ii. how to create navbar-toggler?

navbar -toggler is a button that hides the content of the navbar and is replaced with a button hamburger icon.

To create a  toggler you must use three options :

1.  class="navbar-toggler"

2. data-bs-target-toggle="collapse"

3. data-bs-target="#id_of_navbar_nav"


 
code:

<div class="navbar navbar-expand-lg navbar-light bg-light">                    

               

                     <div class="navbar-brand">

                            text or image

                    </div>

   

                <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kuchbhi">

                        <span class="navbar-toggler-icon"></span>
    
                </button>




</div>

           






iii. how to create navbar-nav(navigation)?

navbar-nav must be created in the collapse container.

classes required for navbar-collapse:

1. collapse

2. navbar-collapse

and apply:

        id="kuchbhi"

note: id must be the same as of navbar-toggler-target's id.


in the navbar collapse, you have to create navbar-nav.

classes used for navbar-nav:

1. navbar-nav

2. nav-item

3.nav-link


code:
    

<div class="navbar navbar-expand-lg navbar-light bg-light">                    

               

                     <div class="navbar-brand">

                            text or image

                    </div>



                       
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#kuchbhi">

        <span class="navbar-toggler-icon"></span>

</button>



<div class="collapse navbar-collapse" id="kuchbhi">

        <ul class="navbar-nav">

                <li class="nav-item">

        <a class="nav-link active" aria-current="page" href="#">Home</a>

 </li>

                <li class="nav-item">

                        <a class="nav-link" href="#">about</a>

               </li>

<li class="nav-item">

        <a class="nav-link" href="#">contact</a>

</li>

</ul>

</div>

</div>


how do you create a navigation bar in Bootstrap?


 <html>

<head>

<link rel="stylesheet" href="bootstrap.min.css">

</head>


<body>

<div class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#kuchbhi">

      <span class="navbar-toggler-icon"></span>

</button>

   

<div class="collapse navbar-collapse" id="kuchbhi">

      <ul class="navbar-nav">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">about</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">contact</a>

        </li>

      </ul>

    </div>

  </div>

      <script type="text/javascript" src="bootstrap.bundle.min.js"></script>


</body>

</html>



navbar with dropdown


 <html>


  <head>


  <link rel="stylesheet" href="bootstrap.min.css">


  </head>




  <body>


    <div class="navbar navbar-expand-lg navbar-light bg-light">


  


      <a class="navbar-brand" href="#">Navbar</a>


      


      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#kuchbhi">


                <span class="navbar-toggler-icon"></span>


      </button>


   


       <div class="collapse navbar-collapse" id="kuchbhi">


              <ul class="navbar-nav">


                <li class="nav-item">


                    <a class="nav-link active" aria-current="page" href="#">Home</a>


                </li>


                <li class="nav-item">


                    <a class="nav-link" href="#">about</a>


                </li>


      


                <li class="nav-item">


                    <a class="nav-link" href="#">contact</a>


                </li>


                <li class="nav-item dropdown">

                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" >

                    products

                  </a>

                          <ul class="dropdown-menu" >

                              <li><a class="dropdown-item" href="#">Action</a></li>

                              <li><a class="dropdown-item" href="#">Another action</a></li>

                              <li><a class="dropdown-item" href="#">Something else here</a></li>

                          </ul>

                </li>


            </ul><!--navbar-nav closed-->


        </div><!--navbar collapse closed-->


      </div><!--navbar closed-->


      <script type="text/javascript" src="bootstrap.bundle.min.js"></script>


</body>

</html>




0 Comments