Creating Navbar Vanilla Html And Css Vs Bootstrap

Posted By Bajarangi soft , Posted On 12-10-2020

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.

Example 1: Navbar without Bootstrap (Vanilla HTML CSS)

<!DOCTYPE html>
<html>
<head>
    <title>Navbar BAJARANGI SOFT</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, 29, 102);
            text-decoration: none;
        }
        img {
            width: 30%;
        }
        #image {
            width: 24%;
        }
        #blankSpace {
            width: 16%;
            height: 34px;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li id="image">
            <img src=
                         "logo.jpg"
                 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.

Example 2: Navbar using Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>bootstrapNavbar BAJARANGI SOFT</title>
    <link rel="stylesheet"
          href=
                  "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          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=
                     "logo.jpg"
             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.

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

CSS:

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

Related Post

How To Use HTML DOM Input Button Object In JavaScript
Difference Between Navs and Navbar In Bootstrap 4
How To Change The Background Color of The Active Navbar Link
How To Align Navbar Items To Center Using Bootstrap
How To Align Navbar Items To The Right In Bootstrap 4
Creating Navbar Vanilla Html And Css Vs Bootstrap
How To Design Full Width dropdown Navbar Using Bootstrap
How To Create Transparent Navbar Using HTML And CSS