Courses
Building Research Portfolio with Hugo
Styling Your Site with Bootstrap
Building and Styling the Homepage

Building and Styling the Homepage

Authors
Your Name | Collaborator Name
Download Materials

Bootstrap is a CSS framework that provides pre-styled components and utility classes. By adding Bootstrap classes to HTML elements, you can create professional-looking websites without writing custom CSS.

Here we will see:

  • how to use Bootstrap utility classes for styling
  • how to create layouts with containers and grids
  • how to add text elements and polish the homepage

Section 1: Bootstrap Setup with Divs and Basic Styling

Background

Bootstrap must be included via CDN links in the HTML head. Once included, Bootstrap classes can be added to any HTML element. The most basic elements are divs, which act as containers. Bootstrap provides utility classes for colors, spacing, borders, and layout.

Exercises

This section covers including Bootstrap and using basic utility classes on div elements.

Concept Description
CDN Content Delivery Network link to include Bootstrap
container Centers content with side margins
container-fluid Full-width container
bg-primary, bg-success Background color classes
text-white, text-center Text color and alignment
py-3, px-4 Padding utilities (y=vertical, x=horizontal)
rounded, shadow Border radius and shadow utilities
d-flex, align-items-center Flexbox utilities

Bootstrap is included by adding link tags in the HTML head. Once included, Bootstrap’s default fonts and styles are applied automatically.

Example: Include Bootstrap CDN and create basic HTML structure with a div

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>My Homepage</title>
</head>
<body>
    <div>Welcome to my homepage</div>
</body>
</html>

Exercise: Remove the Bootstrap CDN link and see how the page immediately changes. Put it back in so we have access to Bootstrap classes.

<html>
<head>
    <title>My Homepage</title>
</head>
<body>
    <div>Welcome to my homepage</div>
</body>
</html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>My Homepage</title>
</head>
<body>
    <div>Welcome to my homepage</div>
</body>
</html>

Exercise: Add container class to the div and see content centered with side margins.

Solution 
<body>
    <div class="container">Welcome to my homepage</div>
</body>

Exercise: Change container to container-fluid and see div span full width.

Solution 
<body>
    <div class="container-fluid">Welcome to my homepage</div>
</body>

Bootstrap provides background color classes. The bg-primary class applies Bootstrap’s primary blue color.

Example: Add bg-primary class to container-fluid and see blue background

<body>
    <div class="container-fluid bg-primary">Welcome to my homepage</div>
</body>

Exercise: Add text-white class and see white text on blue background.

Solution 
<body>
    <div class="container-fluid bg-primary text-white">Welcome to my homepage</div>
</body>

Exercise: Add text-center class and see text centered.

Solution 
<body>
    <div class="container-fluid bg-primary text-white text-center">Welcome to my homepage</div>
</body>

Padding utilities add space inside elements. The py-5 class adds large padding to top and bottom.

Example: Add py-5 class and see vertical padding

<body>
    <div class="container-fluid bg-primary text-white text-center py-5">Welcome to my homepage</div>
</body>

Exercise: Add min-vh-100 class and see section stretch to full screen height.

Solution 
<body>
    <div class="container-fluid bg-primary text-white text-center py-5 min-vh-100">Welcome to my homepage</div>
</body>

Exercise: Add d-flex align-items-center and see content centered vertically.

Solution 
<body>
    <div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
        Welcome to my homepage
    </div>
</body>

Create a second section below the hero to add more content to the page.

Example: Add a second div with container and bg-light classes below the hero section

<body>
    <div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
        Welcome to my homepage
    </div>
    <div class="container bg-light">Our Services</div>
</body>

Exercise: Add py-5 class to the second div and see vertical padding.

Solution 
<body>
    <div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
        Welcome to my homepage
    </div>
    <div class="container bg-light py-5">Our Services</div>
</body>

Exercise: Add text-center class to the second div and see centered text.

Solution 
<body>
    <div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
        Welcome to my homepage
    </div>
    <div class="container bg-light py-5 text-center">Our Services</div>
</body>

Section 2: Grid Layout and Content Structure

Background

Bootstrap’s grid system divides the page into 12 columns. Elements can span multiple columns using col classes. The row class groups columns together. Responsive breakpoints (sm, md, lg) control layout on different screen sizes.

Exercises

This section covers creating multi-column layouts with Bootstrap’s grid system.

Concept Description
row Container for columns
col Auto-width column
col-md-4 Responsive column (4 columns on medium+ screens)
card Bootstrap card component
card-body Card content area
Grid system 12-column layout system

The row class creates a horizontal group for columns. Columns with col class divide space equally.

Example: Add a row div inside the “Our Services” container with three col divs

<div class="container bg-light py-5 text-center">
    <h2>Our Services</h2>
    <div class="row">
        <div class="col">Service 1</div>
        <div class="col">Service 2</div>
        <div class="col">Service 3</div>
    </div>
</div>

Exercise: Change col to col-md-4 for all three columns and see responsive columns.

Solution 
<div class="container bg-light py-5 text-center">
    <h2>Our Services</h2>
    <div class="row">
        <div class="col-md-4">Service 1</div>
        <div class="col-md-4">Service 2</div>
        <div class="col-md-4">Service 3</div>
    </div>
</div>

Exercise: Add py-3 class to each column and see padding in columns.

Solution 
<div class="container bg-light py-5 text-center">
    <h2>Our Services</h2>
    <div class="row">
        <div class="col-md-4 py-3">Service 1</div>
        <div class="col-md-4 py-3">Service 2</div>
        <div class="col-md-4 py-3">Service 3</div>
    </div>
</div>

Bootstrap cards are containers with borders and padding. They are perfect for displaying content in a grid.

Example: Wrap content in each column with a div that has card class

<div class="container bg-light py-5 text-center">
    <h2>Our Services</h2>
    <div class="row">
        <div class="col-md-4 py-3">
            <div class="card">Service 1</div>
        </div>
        <div class="col-md-4 py-3">
            <div class="card">Service 2</div>
        </div>
        <div class="col-md-4 py-3">
            <div class="card">Service 3</div>
        </div>
    </div>
</div>

Exercise: Wrap card content with card-body div and see proper padding inside cards.

Solution 
<div class="container bg-light py-5 text-center">
    <h2>Our Services</h2>
    <div class="row">
        <div class="col-md-4 py-3">
            <div class="card">
                <div class="card-body">Service 1</div>
            </div>
        </div>
        <div class="col-md-4 py-3">
            <div class="card">
                <div class="card-body">Service 2</div>
            </div>
        </div>
        <div class="col-md-4 py-3">
            <div class="card">
                <div class="card-body">Service 3</div>
            </div>
        </div>
    </div>
</div>

Exercise: Add h5 tags around the service names and see headings in cards.

Solution 
<div class="container bg-light py-5 text-center">
    <h2>Our Services</h2>
    <div class="row">
        <div class="col-md-4 py-3">
            <div class="card">
                <div class="card-body">
                    <h5>Service 1</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4 py-3">
            <div class="card">
                <div class="card-body">
                    <h5>Service 2</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4 py-3">
            <div class="card">
                <div class="card-body">
                    <h5>Service 3</h5>
                </div>
            </div>
        </div>
    </div>
</div>

Add description text and styling to make cards more informative and attractive.

Example: Add paragraph with description text below each heading

<div class="card">
    <div class="card-body">
        <h5>Web Design</h5>
        <p>Create beautiful and responsive websites</p>
    </div>
</div>

Exercise: Add text-muted class to the paragraph and see gray text.

Solution 
<div class="card">
    <div class="card-body">
        <h5>Web Design</h5>
        <p class="text-muted">Create beautiful and responsive websites</p>
    </div>
</div>

Exercise: Add shadow class to all cards and see shadow effect.

Solution 
<div class="col-md-4 py-3">
    <div class="card shadow">
        <div class="card-body">
            <h5>Web Design</h5>
            <p class="text-muted">Create beautiful and responsive websites</p>
        </div>
    </div>
</div>

Add images to cards to make them more visually appealing.

Example: Add img tag with card-img-top class before card-body

<div class="card shadow">
    <img src="some_image" class="card-img-top" alt="Web Design">
    <div class="card-body">
        <h5>Web Design</h5>
        <p class="text-muted">Create beautiful and responsive websites</p>
    </div>
</div>

Exercise: Add a link with btn btn-primary classes inside card-body and see button.

Solution 
<div class="card shadow">
    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Web Design">
    <div class="card-body">
        <h5>Web Design</h5>
        <p class="text-muted">Create beautiful and responsive websites</p>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>

Exercise: Add rounded class to all cards and see rounded corners.

Solution 
<div class="col-md-4 py-3">
    <div class="card shadow rounded">
        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Web Design">
        <div class="card-body">
            <h5>Web Design</h5>
            <p class="text-muted">Create beautiful and responsive websites</p>
            <a href="#" class="btn btn-primary">Learn More</a>
        </div>
    </div>
</div>

Section 3: Adding Text Elements

Background

HTML provides semantic tags for text content. Headings (h1-h6) create hierarchy. Paragraphs (p) contain body text. Links (a) enable navigation. Bootstrap provides classes to style these elements and create buttons. A footer completes the page.

Exercises

This section covers enhancing the hero section and adding a footer.

Concept Description
<h1> to <h6> Heading tags (h1 largest, h6 smallest)
<p> Paragraph tag
lead Larger paragraph text
btn, btn-primary Button styling classes
<footer> Footer element

Enhance the hero section with proper heading tags and description text.

Example: Replace hero text with h1 heading and paragraph and wrap with div class w-100 to add vertical spacing

<div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
    <div>
        <h1>Welcome to My Portfolio</h1>
        <p>Building my portfolio</p>
    </div>
</div>

Exercise: Add display-4 class to h1 and see larger heading.

Solution 
<div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
    <div>
        <h1 class="display-4">Welcome to My Portfolio</h1>
        <p>Building amazing web experiences</p>
    </div>
</div>

Exercise: Add lead class to paragraph and see larger text.

Solution 
<div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
    <div>
        <h1 class="display-4">Welcome to My Portfolio</h1>
        <p class="lead">Building amazing web experiences</p>
    </div>
</div>

Add call-to-action buttons to encourage user interaction.

Example: Add a link with btn btn-light btn-lg classes below the paragraph

<div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
    <div>
        <h1 class="display-4">Welcome to My Portfolio</h1>
        <p class="lead">Building amazing web experiences</p>
        <a href="#" class="btn btn-light btn-lg">Get Started</a>
    </div>
</div>

Exercise: Add second button with btn btn-outline-light btn-lg and see outlined button.

Solution 
<div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
    <div>
        <h1 class="display-4">Welcome to My Portfolio</h1>
        <p class="lead">Building amazing web experiences</p>
        <a href="#" class="btn btn-light btn-lg">Get Started</a>
        <a href="#" class="btn btn-outline-light btn-lg">Learn More</a>
    </div>
</div>

Exercise: Add me-2 class to first button and see spacing between buttons.

Solution 
<div class="container-fluid bg-primary text-white text-center py-5 min-vh-100 d-flex align-items-center justify-content-center">
    <div>
        <h1 class="display-4">Welcome to My Portfolio</h1>
        <p class="lead">Building amazing web experiences</p>
        <a href="#" class="btn btn-light btn-lg me-2">Get Started</a>
        <a href="#" class="btn btn-outline-light btn-lg">Learn More</a>
    </div>
</div>

Create a footer section with contact information and copyright notice.

Example: Add footer element with bg-dark text-white py-4 at the end of body

<footer class="bg-dark text-white py-4">
    <div class="container text-center">
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Exercise: Add social media links above the copyright text.

Solution 
<footer class="bg-dark text-white py-4">
    <div class="container text-center">
        <div class="mb-3">
            <a href="#" class="text-white me-3">Facebook</a>
            <a href="#" class="text-white me-3">Twitter</a>
            <a href="#" class="text-white">LinkedIn</a>
        </div>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Exercise: Add text-decoration-none to all social links and see underlines removed.

Solution 
<footer class="bg-dark text-white py-4">
    <div class="container text-center">
        <div class="mb-3">
            <a href="#" class="text-white text-decoration-none me-3">Facebook</a>
            <a href="#" class="text-white text-decoration-none me-3">Twitter</a>
            <a href="#" class="text-white text-decoration-none">LinkedIn</a>
        </div>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </div>
</footer>