Courses
Building Research Portfolio with Hugo
Styling Your Site with Bootstrap
Making Attractive Navigation Bar and Using Containers

Making Attractive Navigation Bar and Using Containers

Authors
Your Name | Collaborator Name
Download Materials

Navbar and Containers

Bootstrap provides navigation components and grid systems for creating responsive layouts. Navigation bars allow users to move between pages and sections. The grid system divides the page into columns that adjust to different screen sizes.

Here we will see:

  • how to create navigation bars with Bootstrap components
  • how to use the grid system to create content columns

Section 1: Starting Point

Setup Files

These files should already exist from the previous notebook.

layouts/_default/baseof.html:

<!DOCTYPE html>
<html>
<head>
    <title>{{ .Site.Title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {{ block "main" . }}{{ end }}
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

layouts/index.html:

{{ define "main" }}
<div class="bg-info w-100 rounded-pill vh-100 d-flex align-items-center justify-content-center">
    <div class="py-5 mb-4">
        <h1 class="display-2 text-center fw-bold">Welcome to My Portfolio</h1>
        <p class="lead text-center fw-normal">Building amazing things</p>
        <a href="mailto:your.email@example.com" class="btn btn-warning btn-lg rounded mx-auto d-block mt-4">Get Started</a>
    </div>
</div>
{{ end }}

Section 2: Navigation Bar

Background

Navigation bars provide links to different pages or sections of a website. Bootstrap navbar component uses specific classes to create responsive navigation. The navbar class provides base styling. The navbar-expand classes control when the navigation collapses on smaller screens. Background and text color classes style the navbar appearance.

Exercises

This section covers creating navigation bars with Bootstrap navbar component.

Concept Description
<nav></nav> Navigation element
navbar Bootstrap navbar base class
navbar-expand Always expanded navbar
navbar-expand-lg Expand navbar on large screens
navbar-dark Light text for dark backgrounds
navbar-light Dark text for light backgrounds
bg-dark Dark background color
bg-primary Primary blue background
bg-light Light gray background
container Fixed-width container
container-fluid Full-width container
fixed-top Fix element to top of viewport
navbar-brand Brand/logo section

Adding navbar classes

Example: Add the class navbar to the nav element.

Update layouts/index.html:

<nav class="navbar">
    <div>
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>
</nav>

Navbar colors

Example: Add the classes bg-primary and navbar-light to the nav element.

<nav class="navbar bg-primary navbar-light">

    <div>
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>

</nav>

Exercise: Change the classes to bg-light and navbar-light.

Solution 
<nav class="navbar bg-light navbar-light">

    <div>
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>

</nav>

Exercise: Change the classes to bg-dark and navbar-dark.

Solution 
<nav class="navbar bg-dark navbar-dark">

    <div>
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>

</nav>

Navbar container

Example: Add the class container to the div inside the nav.

<nav class="navbar bg-dark navbar-dark">

    <div class="container">
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>

</nav>

Exercise: Change the class to container-fluid.

Solution 
<nav class="navbar bg-dark navbar-dark">

    <div class="container-fluid">
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>

</nav>

Exercise: Add the class fixed-top to the nav element.

Solution 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">

    <div class="container-fluid">
        <a class="navbar-brand" href="/">My Portfolio</a>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
    </div>

</nav>

Section 3: Content Columns

Background

Bootstrap grid system divides the page into 12 columns. The container class creates a responsive fixed-width container for content. The row class creates a horizontal group of columns. Column classes specify how many of the 12 columns an element should span. Combining these classes creates flexible column layouts.

Exercises

This section covers creating content columns with Bootstrap grid system.

Concept Description
container Responsive fixed-width container
row Horizontal group of columns
col-md-4 4 of 12 columns on medium+ screens
col-md-6 6 of 12 columns on medium+ screens
col-md-12 12 of 12 columns (full width)
my-5 Vertical margin size 5
py-3 Vertical padding size 3
text-center Center align text

Grid structure

Example: Add a container with one column below the hero section.

<div class="container my-5">

    <div class="row">

        <div class="col-md-12">
            <h3>Services</h3>
        </div>

    </div>

</div>

Exercise: Change to two columns using the class col-md-6.

Solution 
<div class="container my-5">

    <div class="row">

        <div class="col-md-6">
            <h3>Web Design</h3>
        </div>

        <div class="col-md-6">
            <h3>Development</h3>
        </div>

    </div>

</div>

Exercise: Change to three columns using the class col-md-4.

Solution 
<div class="container my-5">

    <div class="row">

        <div class="col-md-4">
            <h3>Web Design</h3>
        </div>

        <div class="col-md-4">
            <h3>Development</h3>
        </div>

        <div class="col-md-4">
            <h3>Consulting</h3>
        </div>

    </div>

</div>

Column styling

Example: Center the text in the columns by adding the class text-center.

<div class="col-md-4 text-center">
    <h3>Web Design</h3>
</div>

<div class="col-md-4 text-center">
    <h3>Development</h3>
</div>

<div class="col-md-4 text-center">
    <h3>Consulting</h3>
</div>

Exercise: Add the class py-3 for padding to all columns.

Solution 
<div class="col-md-4 text-center py-3">
    <h3>Web Design</h3>
</div>

<div class="col-md-4 text-center py-3">
    <h3>Development</h3>
</div>

<div class="col-md-4 text-center py-3">
    <h3>Consulting</h3>
</div>