Developing the Navbar in Bootstrap from scratch | Tutorial – 7

In this bootstrap website development tutorial we will develop the navbar in bootstrap from scratch. We will use the inbuilt classes of the Navbar component in provided in bootstrap.
Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar.
  • Ensure accessibility by using a nav element or, if using a more generic element such as a div, add a role=”navigation” to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • .form-inline for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Bootstrap Navbar documentation – https://getbootstrap.com/docs/4.1/components/navbar/

Setting up everything Library into our Project Offline –

Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE

The folder hierarchy should look like this –

  • test code
    • bootstrap
      • css
        • bootstrap.min.css
      • js
        • bootstrap.min.js
        • jquery-3.3.1.slim.min.js
        • popper.min.js
    • css
      • style.css (our custom css file)
    • fontawesome-free-5.6.3-web
      • css
        • all.css (the only one we need to link in our project for font awesome icons)
      • js
      • etc
      • etc
    • imgs
      • logo_text_white_small.png
    • default.html

If you already have the entire code folder from the previous tutorial, then the only changes you have to do is to create imgs folder and add an image for the logo & following are the changes that needs to be done in the default.html page and style.css –

default.html page –
style.css page –
YouTube video tutorial –

Leave a Reply

Your email address will not be published. Required fields are marked *