Flex utilities in Bootsrap - Mini Project: Build & Apply

Building a Responsive Navigation Bar with Bootstrap Flex Utilities

📖 Scenario: You are creating a simple responsive navigation bar for a website. The navigation bar should have a brand name on the left and navigation links on the right. You will use Bootstrap's flex utilities to arrange these elements horizontally and make sure they align properly.

🎯 Goal: Build a navigation bar using Bootstrap flex utilities that displays the brand name on the left and navigation links on the right in a horizontal row. The navigation bar should be responsive and visually balanced.

📋 What You'll Learn

Use a <nav> element with Bootstrap classes for flex layout

Place the brand name inside a <a> tag with class navbar-brand

Place navigation links inside a <div> with flex utilities to align them to the right

Use Bootstrap flex classes like d-flex, justify-content-between, and align-items-center

Ensure the navigation bar is responsive and elements are horizontally aligned

💡 Why This Matters

🌍 Real World

Navigation bars are essential for websites to help users move between pages easily. Using Bootstrap flex utilities makes it quick and easy to build responsive, well-aligned navigation bars without writing custom CSS.

💼 Career

Front-end developers often use Bootstrap or similar frameworks to build user interfaces efficiently. Understanding flex utilities is key to creating layouts that work well on all screen sizes.

1

Create the basic HTML structure for the navigation bar

Create a <nav> element with class navbar and d-flex. Inside it, add an <a> tag with class navbar-brand and text MySite.

Bootsrap

  MySite
  

Need a hint?

Use the navbar and d-flex classes on the <nav> tag. Add the brand link inside with class navbar-brand.

2

Add a container for navigation links aligned to the right

Inside the <nav>, after the brand link, add a <div> with classes d-flex and ms-auto to push it to the right. Leave it empty for now.

Bootsrap

  MySite
  
    
  

Need a hint?

Use d-flex to make the container a flexbox and ms-auto to push it to the right side.

3

Add navigation links inside the right-aligned container

Inside the <div class="d-flex ms-auto">, add three <a> tags with class nav-link and href="#". The links should have text: Home, About, and Contact.

Bootsrap

  MySite
  
    
  

Need a hint?

Add three links with class nav-link inside the right container with the exact texts.

4

Add vertical alignment and spacing to the navigation bar

Add the class align-items-center to the <nav> element to vertically center the items. Also add gap-3 to the right container <div> to add spacing between the links.

Bootsrap

  
  MySite
  
    
    Home
    About
    Contact
  

Need a hint?

Use align-items-center on the nav to center vertically and gap-3 on the links container for spacing.