Open In App

Creating Navbar | Vanilla HTML CSS Vs Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

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)




<!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>


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




<!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>


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.


Last Updated : 24 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads