Courses

Designing Hero Elements with Bootstrap Framework

Authors

Your Name | Collaborator Name

Download Materials

Designing Hero Elements with Bootstrap

Bootstrap provides utility classes for styling HTML elements without writing custom CSS. These classes control typography, colors, spacing, and layout. A hero section typically includes a headline, visual element, and call-to-action button. Bootstrap classes can style each component to create an attractive landing page header. Before using Bootstrap classes, the Bootstrap framework must be added to the project through CDN links.

Here we will see:

how to set up Bootstrap with CDN links
how to style hero headlines with typography classes
how to create hero visuals with color and sizing
how to design call-to-action buttons

Setup

Background

Bootstrap is a CSS framework that must be loaded into web pages before its classes can be used. The easiest way to add Bootstrap is through Content Delivery Network (CDN) links. CDN links load Bootstrap files from remote servers without downloading anything to your project. The Bootstrap CSS link goes in the head section and provides all styling classes. The Bootstrap JavaScript link goes at the end of the body section and enables interactive components. These links must be added to every HTML file or to a base template that other pages inherit from.

Setup Files

Create the following files to enable Bootstrap in your Hugo project.

Create 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>

Create layouts/index.html:

{{ define "main" }}
    <h1>Welcome</h1>
{{ end }}

Section 1: Hero Headline and Messaging

Background

The hero headline is the first text visitors see on a webpage. Bootstrap provides display classes that make headings larger and more prominent than standard heading tags. The display classes range from display-1 to display-6, with display-1 being the largest. Text alignment classes control whether content appears left, center, or right. Font weight classes adjust how bold or light text appears. Spacing utilities add margins and padding to control whitespace around elements. Combining these classes creates professional-looking headlines without writing CSS.

Exercises

This section covers styling headlines with Bootstrap typography and spacing classes.

Concept	Description
`<h1></h1>`	Main heading tag
`<p></p>`	Paragraph tag
`class=""`	HTML attribute for CSS classes
`display-1` to `display-6`	Large heading display classes
`lead`	Class for larger body text
`text-center`	Center align text
`text-start`	Left align text
`text-end`	Right align text
`fw-bold`	Bold font weight
`fw-normal`	Normal font weight
`fw-light`	Light font weight
`mt-1` to `mt-5`	Top margin (1-5)
`mb-1` to `mb-5`	Bottom margin (1-5)
`py-1` to `py-5`	Vertical padding (1-5)

HTML headings create a hierarchy of text importance. The h1 tag represents the most important heading on a page. Without CSS classes, headings display in their default browser styles. Bootstrap classes enhance these basic headings with better typography and spacing.

Example: Create a basic heading in the layouts/index.html file.

<h1>Welcome</h1>

Exercise: Change the heading text to “Welcome to My Portfolio”.

Solution

<h1>Welcome to My Portfolio</h1>

Exercise: Add a subheading paragraph below with text “Building amazing things”.

Solution

<h1>Welcome to My Portfolio</h1>
<p>Building amazing things</p>

Display classes make headings significantly larger than standard heading tags. These classes are designed for hero sections and landing pages where headings need maximum visual impact. The numbers indicate relative size, with display-1 being the largest and display-6 being the smallest. Display classes maintain responsive sizing across different screen sizes.

Example: Add the display-4 class to make the heading larger in the layouts/index.html file.

<h1 class="display-4">Welcome to My Portfolio</h1>
<p>Building amazing things</p>

Exercise: Change to display-1 class for the largest size.

Solution

<h1 class="display-1">Welcome to My Portfolio</h1>
<p>Building amazing things</p>

Exercise: Change to display-2 and add lead class to the subheading.

Solution

<h1 class="display-2">Welcome to My Portfolio</h1>
<p class="lead">Building amazing things</p>

Text alignment classes control the horizontal positioning of text within its container. The text-center class centers content, which is common for hero sections. The text-start class aligns content to the left, while text-end aligns to the right. These classes work on any text element including headings and paragraphs.

Example: Center the heading in the layouts/index.html file.

<h1 class="display-2 text-center">Welcome to My Portfolio</h1>
<p class="lead">Building amazing things</p>

Exercise: Change alignment to text-start (left-aligned).

Solution

<h1 class="display-2 text-start">Welcome to My Portfolio</h1>
<p class="lead">Building amazing things</p>

Exercise: Change back to text-center and add text-center to subheading too.

Solution

<h1 class="display-2 text-center">Welcome to My Portfolio</h1>
<p class="lead text-center">Building amazing things</p>

Font weight classes control the thickness of text characters. The fw-bold class makes text bold and prominent, ideal for main headings. The fw-normal class applies standard weight, suitable for body text and subheadings. The fw-light class creates thin, delicate text for subtle design effects. Different weights create visual hierarchy and emphasis.

Example: Make the heading bold in the layouts/index.html file.

<h1 class="display-2 text-center fw-bold">Welcome to My Portfolio</h1>
<p class="lead text-center">Building amazing things</p>

Exercise: Change font weight to fw-light.

Solution

<h1 class="display-2 text-center fw-light">Welcome to My Portfolio</h1>
<p class="lead text-center">Building amazing things</p>

Exercise: Keep heading as fw-bold and make subheading fw-normal.

Solution

<h1 class="display-2 text-center fw-bold">Welcome to My Portfolio</h1>
<p class="lead text-center fw-normal">Building amazing things</p>

Spacing utilities control the whitespace around elements. Margin classes (mt, mb, my) add space outside elements, pushing them away from neighbors. Padding classes (pt, pb, py) add space inside elements, creating breathing room around content. Numbers 1-5 indicate increasing amounts of space. The py class adds vertical padding (top and bottom), while mb adds bottom margin.

Example: Add top margin to the heading in the layouts/index.html file.

<h1 class="display-2 text-center fw-bold mt-5">Welcome to My Portfolio</h1>
<p class="lead text-center fw-normal">Building amazing things</p>

Exercise: Add py-4 class for vertical padding.

Solution

<h1 class="display-2 text-center fw-bold mt-5 py-4">Welcome to My Portfolio</h1>
<p class="lead text-center fw-normal">Building amazing things</p>

Exercise: Wrap both heading and subheading in a div with py-5 and mb-4 classes.

Solution

<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>
</div>

Section 2: Hero Visual

Background

The hero visual provides a backdrop for the headline and creates visual impact. Before adding visual styling, it’s important to understand the div element. The div tag is a container element that groups other HTML elements together. Divs have no visual appearance by themselves but become powerful when styled with CSS classes. They act as wrappers that can have backgrounds, borders, spacing, and layout properties. In Bootstrap, divs are commonly used to create sections, apply background colors, and control layout with flexbox.

Bootstrap provides background color classes (bg-primary, bg-info, bg-success) that create colored sections. Width classes (w-50, w-75, w-100) control how much horizontal space an element occupies. The vh-100 class makes an element fill the full viewport height. Flexbox classes (d-flex, align-items-center, justify-content-center) enable powerful layout control, allowing content to be centered both horizontally and vertically within containers.

Exercises

This section covers creating colored backgrounds and centering content.

Concept	Description
`<div></div>`	Container division tag
`bg-primary`	Blue background color
`bg-info`	Light blue background color
`bg-success`	Green background color
`w-25` to `w-100`	Width percentages
`vh-100`	Full viewport height
`d-flex`	Enable flexbox layout
`align-items-center`	Center items vertically
`justify-content-center`	Center items horizontally
`rounded`	Rounded corners
`rounded-pill`	Fully rounded ends
`rounded-0` to `rounded-5`	Corner radius levels

Background color classes add colored backgrounds to elements. These classes use Bootstrap’s color system with semantic names. The bg-info class creates a light blue background. The bg-success class creates a green background. The bg-primary class creates a blue background. Background colors help create visual hierarchy and draw attention to important sections.

Example: Wrap the headline in a div with a light blue background color in the layouts/index.html file.

<div class="bg-info">
    <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>
    </div>
</div>

Exercise: Change background to bg-success (green).

Solution

<div class="bg-success">
    <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>
    </div>
</div>

Exercise: Change background to bg-primary (blue).

Solution

<div class="bg-primary">
    <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>
    </div>
</div>

Width classes control the horizontal size of elements as a percentage of their container. The w-50 class sets width to 50%, making an element half as wide as its parent. The w-75 class sets width to 75%. The w-100 class makes an element full width. These classes are useful for creating responsive layouts and controlling section sizes.

Example: Set the background width to 50% in the layouts/index.html file.

<div class="bg-primary w-50">
    <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>
    </div>
</div>

Exercise: Change width to w-75 (75%).

Solution

<div class="bg-primary w-75">
    <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>
    </div>
</div>

Exercise: Change width to w-100 (full width).

Solution

<div class="bg-primary w-100">
    <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>
    </div>
</div>

Border radius classes add rounded corners to elements. The rounded class applies subtle corner rounding for a modern look. The rounded-3 class increases the curve radius for more prominent rounding. The rounded-pill class creates fully rounded ends, making elements pill-shaped. Rounded corners soften the design and create a friendlier appearance.

Example: Add the rounded class to the div in the layouts/index.html file.

<div class="bg-primary w-100 rounded">
    <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>
    </div>
</div>

Exercise: Change to rounded-pill for fully rounded ends.

Solution

<div class="bg-primary w-100 rounded-pill">
    <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>
    </div>
</div>

Exercise: Change to rounded-5 for less rounded corners.

Solution

<div class="bg-primary w-100 rounded-5">
    <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>
    </div>
</div>

Viewport height and flexbox classes enable full-screen sections with centered content. The vh-100 class makes an element span the entire viewport height. The d-flex class enables flexbox layout, which provides powerful alignment capabilities. The align-items-center class centers content vertically within a flex container. The justify-content-center class centers content horizontally. Together, these classes create hero sections where content is perfectly centered on screen.

Example: Add full viewport height with flexbox to the div in the layouts/index.html file.

<div class="bg-primary w-100 rounded-pill vh-100 d-flex">
    <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>
    </div>
</div>

Exercise: Add align-items-center to center content vertically.

Solution

<div class="bg-primary w-100 rounded-pill vh-100 d-flex align-items-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>
    </div>
</div>

Exercise: Add justify-content-center to center horizontally and change background.

Solution

<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>
    </div>
</div>

Section 3: CTA Button

Background

Call-to-action buttons prompt visitors to take specific actions like contacting you or starting a project. Bootstrap provides button classes that style anchor tags to look like clickable buttons. The btn class transforms a link into a button with proper padding and styling. Color classes (btn-primary, btn-success, btn-warning) provide semantic colors. Size classes (btn-sm, btn-lg) adjust button dimensions. Border radius classes control corner rounding. Spacing and display classes position buttons within layouts. The d-block class makes buttons display as block elements, and mx-auto centers them horizontally.

Exercises

This section covers styling call-to-action buttons with Bootstrap classes.

Concept	Description
`<a></a>`	Anchor tag for links
`href=""`	Link destination attribute
`mailto:`	Email link protocol
`btn`	Base button class
`btn-primary`	Primary blue button
`btn-success`	Green success button
`btn-warning`	Yellow warning button
`btn-sm`	Small button size
`btn-lg`	Large button size
`rounded`	Rounded corners
`rounded-pill`	Fully rounded button
`rounded-0`	No rounded corners
`mx-auto`	Auto horizontal margins
`d-block`	Display as block element
`mt-1` to `mt-5`	Top margin (1-5)

Anchor tags create clickable links. The href attribute specifies the link destination. The mailto: protocol creates email links that open the user’s email client. Without styling, links appear as blue underlined text. Bootstrap’s btn class transforms anchor tags into styled buttons with padding, borders, and hover effects.

Example: Add a basic button link after the hero section in the layouts/index.html file.

<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>
    </div>
</div>

<a href="mailto:email@example.com">Contact Me</a>

Exercise: Change text to “Get Started”.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com">Get Started</a>

Exercise: Add class btn to make it look like a Bootstrap button.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn">Get Started</a>

Button color classes apply semantic colors to buttons. The btn-primary class creates a blue button for primary actions. The btn-success class creates a green button indicating positive actions. The btn-warning class creates a yellow/orange button for cautionary actions. Color choice communicates the button’s purpose and importance to users.

Example: Add the primary color to the button in the layouts/index.html file.

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-primary">Get Started</a>

Exercise: Change color to btn-warning.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-warning">Get Started</a>

Exercise: Change color to btn-dark for final version.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-dark">Get Started</a>

Button size classes control button dimensions. The btn-lg class creates large buttons that draw attention and are easier to click on mobile devices. The btn-sm class creates compact buttons for secondary actions or tight spaces. The default size (no size class) provides a balanced medium option. Size should match the button’s importance in the interface.

Example: Make the button small in the layouts/index.html file.

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-warning btn-sm">Get Started</a>

Exercise: Change size to btn-sm (small).

Exercise: Change to btn-lg for large button.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-warning btn-lg">Get Started</a>

Border radius classes on buttons affect their corner curvature and overall appearance. The rounded-pill class creates fully rounded buttons with circular ends, providing a modern, friendly look. The rounded-0 class removes all corner rounding for sharp, rectangular buttons with a formal appearance. The rounded class provides subtle corner rounding for a balanced, professional aesthetic.

Example: Make the button fully rounded in the layouts/index.html file.

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-warning btn-lg rounded-pill">Get Started</a>

Exercise: Change to rounded-0 for sharp corners.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-warning btn-lg rounded-0">Get Started</a>

Exercise: Change to rounded for slightly rounded corners.

Solution

<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>
    </div>
</div>

<a href="mailto:email@example.com" class="btn btn-warning btn-lg rounded">Get Started</a>

Positioning buttons within the hero section creates a cohesive call-to-action. Moving the button inside the hero div places it with the headline and subheading. The mx-auto class sets horizontal margins to auto, enabling centering. The d-block class makes the inline anchor tag display as a block-level element, which is necessary for horizontal centering with auto margins. Top margin (mt-4) creates appropriate spacing above the button.

Example: Move the button inside the hero visual div in the layouts/index.html file.

<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:email@example.com" class="btn btn-warning btn-lg rounded">Get Started</a>
    </div>
</div>

Exercise: Add mx-auto d-block classes to center the button.

Solution

<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:email@example.com" class="btn btn-warning btn-lg rounded mx-auto d-block">Get Started</a>
    </div>
</div>

Exercise: Add mt-4 for top margin and update email to your own.

Solution

<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>