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)
- <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.
- 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
- 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.
- 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.
Differences Between the two approaches:
- CSS in the bootstrap version is very less.
- The vanilla code is very flexible as compared to bootstrap.
- Writing vanilla code is very tedious whereas once understood bootstrap code becomes very easy.
My Personal Notes arrow_drop_up
Please Login to comment...