Bootstrap 5·Bootstrap from grid to dashboard

Setup and the grid

Load Bootstrap from a CDN and place content with containers, rows and columns.

Beginner 12 min read Lesson 1 of 300 Challenge included

What you will be able to do

Wrap content in .container or .container-fluid.
Use .row for the flex context and .col-* for widths.
Add breakpoint suffixes such as col-md-6.
Never put content directly inside a row without a column.

In plain English

The grid is twelve columns wide. A row creates a flex container and columns divide the space. Breakpoint suffixes let the same markup change shape at sm, md, lg, xl and xxl.

index.htmlHTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-4">
  <div class="row g-3">
    <div class="col-12 col-md-8">Main</div>
    <div class="col-12 col-md-4">Sidebar</div>
  </div>
</div>

Your turn

Make a three-column row

Easy

Build a row with three equal columns on md and up, stacking on small screens.

HTML · starter

<div class="row">

Check your understanding before moving on.

Knowledge checkQuestion 1

How many columns does the Bootstrap grid use?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Containers and spacing

Lesson 1 of 300 · 0% of course