Web Developer Path · lesson 15 of 18

Containers and spacing utilities

Size your page with fixed and full-width containers, and add space with short margin and padding classes.

What you will learn

.container (fixed, centred) and .container-fluid (full width)
spacing classes: property, side and size, such as mt-3 or p-4
centring a block with .mx-auto

Understand the idea

A container is the outer box that holds your content and gives it side padding. .container has a maximum width that grows in steps with the screen and is centred on the page, which keeps long lines of text readable. .container-fluid always spans the full width, which suits dashboards and wide banners.

Spacing classes follow a pattern you can read: a letter for the property (m for margin, p for padding), then an optional letter for the side, then a size from 0 to 5. The sides are t top, b bottom, l left, r right, x left and right together, and y top and bottom together. So mt-3 is margin on top at size 3, px-4 is horizontal padding at size 4, and p-0 removes all padding. The sizes step up from small to large: 1 is a quarter of a rem, 3 is one rem, 5 is three rem.

To centre a fixed-width block horizontally use .mx-auto, which sets the left and right margins to automatic. Utility classes are quick, but if you find yourself repeating the same group of classes many times, write one CSS class of your own instead.

The preview has a small built-in version of the framework with the same class names, and its screen-width steps are shrunk to fit the narrow preview (the real ones are 576, 768, 992 and 1200 pixels).

Example

Containers and spacing together

<div class="container-fluid bg-light p-4">
  <h2 class="mb-3">Full-width strip</h2>
  <p class="mb-0">Padding 4 all round, no space under this paragraph.</p>
</div>
<div class="container mt-3">
  <p>A fixed container, centred, with space above.</p>
</div>

p-4 adds padding on all four sides, mb-3 adds margin below, mt-3 adds margin above, and mb-0 removes the margin below.

Your turn: code to type and practise

Make a container-fluid with the classes bg-light and p-4, and inside it a heading with mb-3 and a paragraph with mb-0. Then add a second div with the classes container and mt-3 that holds a box with the class mx-auto.

Stretch challenge

Use py-5 on a banner and px-0 on a row to see the difference.

← Typography classes Colours, badges, alerts, buttons and borders →

HTML

Keep going in Web Developer Path

Responsive design and the 12-column grid

Inside a `div` with class `container`, build a `div` with class `row` that holds three `div` columns with class `col-md-4`, each containing an `h3` heading and a paragraph.

Start →14

Typography classes

Write an `h1` with the class `display-4`, a paragraph with the class `lead`, and a paragraph that uses `text-center`, `text-muted` and `text-uppercase` (the same element can carry several classes).

Start →16

Colours, badges, alerts, buttons and borders

Build a `div` with the classes `alert` and `alert-success`, two `span` badges with the class `badge`, a `button` with `btn` and `btn-primary`, a `btn-group` holding three `btn` buttons, and a `div` that has both `border` and `rounded`.

Start →17

Navbars and cards

Build a `nav` with the classes `navbar` and `bg-dark`, a `navbar-brand` link and a `navbar-nav` list with at least two `nav-link` links. Then build a `card` containing a `card-body` with a `card-title`, a `card-text` and a link styled as a `btn`.

Start →18

Carousels and scrollspy

Build a carousel with the id `slides`: an indicators list with three `li` items, a `carousel-inner` with three `carousel-item` slides (only the first is `active`), and a `carousel-caption` in the first slide. Then write `<body data-spy="scroll" data-target="#mynav">` as the start of a page with a `nav` whose id is `mynav`.

Start →

Practise the idea

🎯 Play Estimation Station

Estimate big sums without a calculator and see how close you get.

Play now

FAQ

Containers and spacing utilities: common questions

What is the difference between container and container-fluid?

container has a maximum width and is centred. container-fluid always takes the full width of the screen.

What does mt-3 mean?

m is margin, t is top and 3 is the size. It adds margin above the element.

How do I centre a block with a utility class?

Give the block a width (such as w-50) and add mx-auto.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay