Bootstrap 5 Tutorial for Beginners: Build a Responsive Business Page Fast

Bootstrap is one of the fastest ways to build a responsive website. This Bootstrap 5 tutorial covers the essentials for beginners: grid, utilities, components and customisation, using a business page as the example.

1. Add Bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>

Use a specific version number. For production, you can also host the files yourself.

2. The grid

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Service 1</div>
    <div class="col-12 col-md-6 col-lg-4">Service 2</div>
    <div class="col-12 col-md-6 col-lg-4">Service 3</div>
  </div>
</div>

• 12 columns per row
• Breakpoints: sm, md, lg, xl, xxl
• g-4 sets gutters (spacing)

See grid layout basics.

3. Utility classes

• Spacing: mt-3, py-5, px-2
• Text: text-center, fw-bold, text-muted
• Flex: d-flex, align-items-center, justify-content-between, gap-3
• Display: d-none d-md-block (hide on mobile)

4. A service card

<div class="card h-100 shadow-sm border-0">
  <div class="card-body">
    <h3 class="h5 card-title">Website Design</h3>
    <p class="card-text text-muted">Fast, mobile-friendly websites for local businesses.</p>
    <a href="/contact" class="btn btn-primary">Get a quote</a>
  </div>
</div>

5. Navbar

Bootstrap's navbar component includes a collapsible mobile menu (requires the JS bundle). Or build your own. See responsive navbar tutorial.

6. Forms

<form class="row g-3">
  <div class="col-md-6"><label class="form-label" for="n">Name</label><input id="n" class="form-control" required></div>
  <div class="col-md-6"><label class="form-label" for="p">Phone</label><input id="p" type="tel" class="form-control" required></div>
  <div class="col-12"><button class="btn btn-warning fw-bold">Request callback</button></div>
</form>

7. Customise colours

Override CSS variables or recompile Sass:

:root { --bs-primary: #1B6FD8; --bs-primary-rgb: 27,111,216; }

Some components use compiled values, so for deep customisation, Sass is more reliable. See CSS variables.

8. Keep it fast

• Load only what you need (use a custom build or purge unused CSS for large projects)
• Don't load the JS bundle if you don't use interactive components
• Check speed after building. See PageSpeed Insights explained

Avoid the "Bootstrap look"

Custom fonts, brand colours, spacing and imagery make Bootstrap sites look unique. See Tailwind vs Bootstrap.

FAQs

Does Bootstrap 5 need jQuery?

No. Bootstrap 5 removed the jQuery dependency.

Is Bootstrap good for SEO?

SEO depends on content, HTML structure and speed. Bootstrap itself is neutral.

Joboo Web builds custom-branded Bootstrap sites that don't look like templates. Talk to us.