Layouts & Design

Bootstrap

Meet a popular front-end framework and use reusable classes to build polished interfaces faster.

CSS Bootstrap

BOOTSTRAP COMPONENTS

Primary

✓ Success alert

COL

class=”btn btn-primary”

>_ What Is Bootstrap?

Bootstrap is a front-end framework that provides ready-made CSS classes, responsive layout tools, and reusable interface components. Instead of styling every element from scratch, developers can use Bootstrap’s existing classes.

The idea should feel familiar after the previous lesson: Bootstrap gives you a large collection of predefined styles and components that you can apply to your HTML.

btn

Components

Buttons, cards, alerts, navigation, forms, and many other interface pieces.

container

Layout

Containers, rows, and columns help organize responsive page layouts.

p-3

Utilities

Small classes can control spacing, colors, alignment, display, and more.

responsive

Responsive

Bootstrap includes tools designed to adapt interfaces across different screen sizes.

>_ Adding Bootstrap to a Webpage

On a real webpage, Bootstrap’s stylesheet must be loaded before you can use its CSS classes.

index.html

Bootstrap can be installed locally or loaded from a CDN. Once the stylesheet is available, Bootstrap’s CSS classes can be used throughout the page.

>_ Bootstrap Buttons

Bootstrap commonly combines a base component class with another class that controls its appearance.

buttons.html

<button class=“btn btn-primary”>
Primary Button
</button>

btn

The base Bootstrap button class.

btn-primary

Applies Bootstrap’s primary button style.

btn-success

Applies a success-themed button style.

btn-danger

Applies a danger-themed button style.

BOOTSTRAP-STYLE BUTTON VARIANTS

Primary Success Danger

>_ Bootstrap Alerts

Alerts follow the same pattern: one class establishes the component and another class selects its variation.

alert.html

<div class=“alert alert-success”>
Your changes were saved!
</div>

ALERT COMPONENT

✓ Your changes were saved successfully.

>_ Bootstrap Cards

Components can also contain other components and classes. A Bootstrap card, for example, may use both card and card-body.

card.html

<div class=“card”>

  <div class=“card-body”>
    Hello, Bootstrap!
  </div>

</div>

>_ Bootstrap’s Grid System

Bootstrap also includes its own responsive layout system. You’ll often see classes such as container, row, and col.

grid.html

<div class=“container”>

  <div class=“row”>

    <div class=“col”>HTML</div>
    <div class=“col”>CSS</div>
    <div class=“col”>JavaScript</div>

  </div>

</div>

container

Wraps and helps position page content.

row

Groups columns into a horizontal row.

col

Creates a flexible column inside a row.

col-md-6

An example of a responsive column class that changes behavior at a breakpoint.

>_ Utility Classes

Bootstrap also contains many small classes called utilities. These can handle common styling jobs without requiring a custom CSS rule.

text-center

Centers text.

p-3

Adds padding using Bootstrap’s spacing scale.

mt-3

Adds margin to the top of an element.

rounded

Adds rounded corners.

🧠

Your CSS Skills Still Matter

Bootstrap doesn’t replace what you’ve learned. When you understand selectors, colors, the Box Model, Grid, and responsive design, Bootstrap becomes much easier to understand and customize.

>_ Developers Use Documentation

You do not need to memorize every Bootstrap class. Real developers regularly use documentation to find the component or utility they need.

📚

Developer Habit

Learn the patterns, not every class name. Knowing that Bootstrap has buttons, cards, grids, utilities, and responsive tools is more useful than trying to memorize the entire framework.

Ready to Code?

Build a Bootstrap-style dashboard.

The Sandbox includes a small set of Bootstrap classes. Use them to turn plain HTML into a structured interface with buttons, alerts, cards, and columns.

mC0de Challenge

Build a Bootstrap Dashboard

The Bootstrap-style classes are already included. Your job is to apply the correct classes to the HTML.

✓ Apply container to the main wrapper.
✓ Create a success message using alert alert-success.
✓ Turn the course wrapper into a row.
✓ Apply col and card to each course.
✓ Style the button with btn btn-primary.

>_ Challenge accepted. Build it below.

mC0de Interactive Sandbox

Bootstrap Challenge

Live Preview

HTML + Bootstrap Styles EDIT

Live Result PREVIEW

⚡ Try swapping btn-primary, btn-success, and btn-danger after completing the challenge.

✓

Lesson 15 Recap

What You’ve Learned

✓ Bootstrap is a front-end framework built around reusable classes and components.

✓ btn provides the base button component.

✓ Classes such as btn-primary provide component variations.

✓ alert and card create reusable interface components.

✓ container, row, and col help build layouts.

✓ Utility classes can quickly control spacing, alignment, and appearance.

Framework unlocked! ⚡ You now understand how Bootstrap turns reusable CSS classes into complete interface components.

🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← UI Libraries HTML & CSS Home Next Lesson → Icons

bootstrap