Bootstrap 5 and the Navigation Bar.
Hi there👋
Today’s article will be focused on styling a navigation bar (navbar) with the latest version of bootstrap, bootstrap v5.0. You might ask, why style with bootstrap? Why not just our good old CSS buddy? Well, let’s get to know bootstrap first.
There may be times we find ourselves, as developers, regularly using some bits of code on various projects that we work on. Rather than writing these codes out every time we need it, we could save it into a file, then just copy and paste it into our projects whenever needed. These re-usable bits of code are referred to as libraries. And bootstrap is one of such libraries. Bootstrap is a front-end component library that contains pre-built CSS styles and classes, as well as, JavaScript functionality. It is majorly used for designing the part of the website that is seen by the users (the front-end). Advantage of styling with bootstrap is that it makes a website responsive, i.e, it makes the layout of a website (how the website appear) adapt to the screen width of whatever viewport (desktop/laptop/tablet/mobile phone) it is being viewed on. Styling with bootstrap also makes the job a whole lot faster and easier!
Here's a link to my recent project, using a few components of bootstrap 5 to style the webpage.
And now, to styling a navigation bar with bootstrap👇
Before you begin, be sure to link bootstrap’s CSS and JavaScript to the head section of your HTML file. You can get the link here
STEP 1: CREATE THE LIST.
To do this, we write out the <nav> element. This element is similar to the <div>, in that it has zero dimension in the absence of a content. So, we add the navbar content (Contact, Pricing and Download) in the form of <ul> and <li> as shown below:
STEP 2: ADD THE ANCHOR TAG (<a></a>)
The list content serve as links that enable us scroll, easily, to a particular section of the website. In order to achieve this, the <li> contents are written in <a> as shown below:
STEP 3: ADD THE PRE-BUILT BOOTSTRAP CLASSES
To make our list look less like bullet points, and more like navigation links, we add some pre-defined bootstrap classes to the HTML elements. These classes have already been assigned various CSS styles by the bootstrap developers (that’s why it’s a library). And so, all we need to do is to apply these classes to the HTML elements and get our elements beautifully styled. Easy-peasy. See how they are applied below:
Result:
Here’s what these classes do:
- ‘.nav-item’ styles the <li> into a navigation item.
- “.nav-link” styles the <li> into a navigation link.
- “.ms-auto” sets the margin-left of the navbar contents to auto.
- “.bg-dark” changes the background color of the navbar to black.
- “.navbar-dark" changes the colour of the navbar contents.
If you’re not comfortable with the dark colour that I’ve chosen, you can always select whatever color you want from the default bootstrap colours found here.
STEP 4: ADD THE BRAND NAME
To add the brand name, we make use of the bootstrap's ".navbar-brand" class. It is best practice to apply this class to an anchor tag.
STEP 5: ADD THE ".navbar-expand-lg" CLASS.
The navbar is currently occupying more space than it should. It'll look neater if the contents are arranged horizontally, in one line. To achieve this, we make use of the bootstrap’s ".navbar-expand-lg" class by applying it to the <nav> as shown below:
Here’s how it works: The "navbar-expand" specifies how the contents will be displayed (either horizontally or vertically) on different viewports. This is where bootstrap responsiveness comes into play. The "lg" (large) is a keyword. Keywords serve as the breakpoints for display, where lg (large) indicates that the contents will be displayed horizontally on a desktop/laptop screen, and displayed vertically on screens with smaller widths (such as tablets and mobile phones). Other keywords are "md", "sm", "xl". You can replace lg with the other keywords and observe how the contents will be displayed on different viewports.
STEP 6: ADD THE NAVBAR TOGGLE BUTTON.
In a bid to reduce the amount of space taken up by the navbar contents when viewed on a tablet/mobile phone, we can have them collapsed into a navbar toggle button. To achieve this, we simply copy and paste the relevant bootstrap <button> and <div> codes from bootstrap as shown below:
Now, we've got a nice looking, and responsive, navigation bar that adapts it's content to whatever screen width it is being viewed on. And it's all thanks to our mobile-first bootstrap!
💡Ensure that the "data-bs-target" in the <button> is targeting the right "id" in the <div>. It's like telling the <button>: this is the <div> you are to collapse.
💡Observe the positioning of the <button> in the above example. It is right below the brand name's <a>. If it were above the <a>, then the button would appear on the left corner of the screen, and the brand name, on the right. With this, you can arrange the elements in the order you want them to appear. Try it out and see what it looks like.
📌For the links to actually work, i.e, to navigate a user to a particular section of the webpage/site, be sure to include the right "url", "page" or "id" to the "href".
To better understand the different styling bootstrap has to offer and how to use them effectively, look up the docs.
I hope you have a nice time coding.👍
