Creating Navbar | Vanilla HTML CSS Vs Bootstrap

Navbar stands for the navigation bar and is an integral part of a web-page. It lists many links both inside and outside the website and makes navigation between different sections easy. Table of contents, menus, and indexes are some common examples of navigation bars.

Building navbars can be time-taking and confusing. Therefore libraries like Bootstrap come in handy with a lot of built-in classes and options.

Example 1: Navbar without Bootstrap (Vanilla HTML CSS)

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Navbar Geeksforgeeks</title>
        <style>
            body {
                margin: 0;
            }
            nav {
                width: 100%;
            }
            ul {
                margin: 0;
                padding: 0;
            }
            li {
                float: left;
                margin: 0;
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 30px;
                width: 12%;
                list-style: none;
                text-align: center;
            }
            a {
                color: rgb(0, 102, 0);
                text-decoration: none;
            }
            img {
                width: 80%;
            }
            #image {
                width: 24%;
            }
            #blankSpace {
                width: 16%;
                height: 34px;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li id="image">
                  <img src=
                       alt="" /></li>
                <li><a href="">Tutorials</a></li>
                <li><a href="">Students</a></li>
                <li><a href="">Courses</a></li>
                <li id="blankSpace"><a href=""></a></li>
                <li><a href="">Hire with us!</a></li>
                <li><a href="">Login</a></li>
            </ul>
        </nav>
    </body>
</html>

chevron_right


Explanations:
HTML:

  • <nav>: The parent element which wrap up all the buttons and icons inside our navbar.
  • <ul>: (unordered list) It is a good practice to store all the links in the navbar as a list.
  • <img>: It is used for icon.
  • <a>: It is used as buttons of navbar.

CSS:



  • float: This attribute alters the alignment of elements from vertical to horizontal.
  • list-style: When set to none it removes the bullet points of lists.
  • text-decoration: It is responsible for underline of links.
  • width: It refers to the horizontal space taken by an element.
  • height: Vertical space taken by an element.

Output:

Example 2: Navbar using Bootstrap

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrapNavbar Geeksforgeeks</title>
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
              crossorigin="anonymous" />
        <style>
            div {
                text-align: center;
            }
            img {
                width: 80%;
            }
            .btn {
                font-size: 25px;
                color: rgb(0, 102, 0);
            }
        </style>
    </head>
  
    <body>
        <div class="row">
            <div class="col-3">
                <img src=
                     alt="" />
            </div>
            <div class="col-4 row">
                <div class="col-4">
                    <a href="#" class="btn">Tutorials</a>
                </div>
                <div class="col-4">
                    <a href="#" class="btn">Students</a>
                </div>
                <div class="col-4">
                    <a href="#" class="btn">Courses</a>
                </div>
            </div>
            <div class="col-2 row"></div>
            <div class="col-3 row">
                <div class="col-8">
                    <a href="#" class="btn">Hire with us!</a>
                </div>
                <div class="col-4">
                    <a href="#" class="btn">Login</a>
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Explanations: As we are aiming for a static navbar without any JavaScript, it will be feasible to use grid instead of a nav.

  1. Link the html document with official Bootstrap CDN(Content Delivery Network).
  2. Define a div with bootstrap class row (this class helps us divide a row into small columns).
  3. Next define four divs with class col-3, 4, 2 and 3 respectively (integers correspond to width of a column) (total width-12).
  4. Create nested divs as required.
  5. Give all buttons a bootstrap class btn which provides us required padding, margin and hover effects.

CSS:

  1. This time our CSS code is much smaller and includes some minor styling such as font size and color.
  2. The padding and margin is looked-after by bootstrap classes.
  3. Entire layout of the navbar is made with the bootstrap rows and columns which further reduced our CSS.

Output:

Differences Between the two approaches:

  1. CSS in the bootstrap version is very less.
  2. The vanilla code is very flexible as compared to bootstrap.
  3. Writing vanilla code is very tedious whereas once understood bootstrap code becomes very easy.

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.