Using bootstrap for layout

How to use bootstrap and understand the simple layout classes

1. First you need to include this in your main base.html header

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Understanding Containers, Rows, and Columns

Bootstrap uses a 12-column grid system to control layout.
Every layout is built using:

1. container
2. row
3. col- classes*

Here is some sample code to look at, however this needs some articles passed to it from flask back end so it can render them:

<html>
<head>
</head>
<body>
<div class="container mt-4">
    <h1>Read about the Zoo Animals</h1>
    <!-- Top 2 large articles -->
    <div class="row">
        {% for article in articles[:2] %}
        <div class="col-md-6 mb-1">
            <a href="/article/{{ article['id'] }}" style="text-decoration:none; color:inherit;">
                <div class="card p-3">
                    <img src="{{ article['image'] or 'https://via.placeholder.com/600x350' }}" class="card-img-top mb-3">
                    <h5>{{ article['title'] }}</h5>
                    <p>{{ article['summary'] }}</p>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>

    <!-- Bottom 3 smaller articles -->
    <div class="row">
        {% for article in articles[2:] %}
        <div class="col-md-4 mb-1">
            <a href="/article/{{ article['id'] }}" style="text-decoration:none; color:inherit;">
                <div class="card p-3">
                    <img src="{{ article['image'] or 'https://via.placeholder.com/400x250' }}" class="card-img-top mb-3">
                    <h6>{{ article['title'] }}</h6>
                    <p>{{ article['summary'] }}</p>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>

</div>

</body>
</html>

1. Core Bootstrap Layout Classes

1.1 container

• Centers all content on the page
• Adds left/right padding
• Limits the width on large screens so text doesn’t stretch too wide

Example:

<div class="container">

1.2 row

• A horizontal strip that holds columns
• Columns must be placed inside a row
• Aligns columns nicely without gaps

Example:

<div class="row">

1.3 col-md-6 (Column Classes)

• Columns define how wide each item is.
• The grid has 12 units per row.

col-md-6 means:

• On medium screens (≥768px) and above → take 6 columns out of 12
• 12 / 6 = 2 columns per row
  → So two items per row

Other examples:

1.4 mb-4 (Margin Bottom)

Bootstrap spacing uses this pattern:

• m = margin
• p = padding
• t = top
• b = bottom
• l = left
• r = right
• x = left & right
• y = top & bottom

mb-4 means:

• Margin
• Bottom
• Size 4
• (Bootstrap uses 0–5 scale → 4 = fairly large spacing)

Examples:

Class Meaning

mt-3margin top size 3

mb-5margin bottom size 5

p-3padding all around

Get Icodewithben’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

px-4padding left & right

py-2padding top & bottom

1.5 card

A Bootstrap component that provides:

• Border
• Shadow
• Rounded corners
• Inner padding (if added)

Used to display content cleanly.

1.6 card-img-top

Makes an image:

• Stretch full width of the card
• Sit at the top
• Maintain aspect ratio

Exercise 1: Change the Number of Columns

Step A — Start with:

<div class="col-md-6">

Step B — Change it to:

1. col-md-4
2. col-md-3
3. col-md-12

Questions

1. What happens when using col-md-4?
2. What happens when a row contains 3 × col-md-3?
3. What happens when using col-md-12?

Exercise 2: Experiment With Spacing

Try changing:

mb-4 → mb-1, mb-5, mt-4, px-3

Questions

1. What does margin-bottom do to the spacing?
2. What happens when you remove mb-4 completely?
3. What is the difference between m and p?

Exercise 3: Change the Layout on Different Screen Sizes

Try replacing:

col-md-4

with:

col-sm-6 col-md-4 col-lg-3

Then answer:

1. How does the layout change on small screens?
2. How many columns appear on large screens?

Exercise 4: Build a 4-Card Row

Use:

<div class="col-md-3">

Add 4 example cards and verify:

• All 4 appear in one row
• No wrapping occurs

Exercise 5: Build a Full Article Grid

Challenge students:

Build a page with:

• 1 full-width top card (col-md-12)
• 2 medium cards below (col-md-6)
• 3 smaller cards (col-md-4)