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.
- Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
- How to design full width dropdown Navbar using Bootstrap ?
- How to align navbar items to the right in Bootstrap 4 ?
- How to Set navbar active class with Bootstrap and AngularJS ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to Align navbar logo to the left screen using Bootstrap ?
- How to change font color in dropdown navbar when collapsed in bootstrap ?
- Difference between bootstrap.css and bootstrap-theme.css
- How to create Animated Blur Navbar using CSS?
- How to create an Affix or sticky Navbar ?
- How to set sticky navbar only for first section of page?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.