Bootstrap Containers

A Bootstrap container is a wrapper used to hold website content. It provides horizontal padding and controls the maximum width of content at different responsive breakpoints.

<div class="container">
    My Website Content
</div>

Containers help keep website content organized and readable. They also make it easier to create responsive layouts.

• Controls content width
• Adds horizontal padding
• Centers content on larger screens
• Works with the Bootstrap grid
• Supports responsive layouts

The .container class creates a responsive fixed-width container. Its maximum width changes at Bootstrap's responsive breakpoints.

<div class="container">

    <h1>
        Welcome
    </h1>

    <p>
        This content is inside a container.
    </p>

</div>

A standard Bootstrap container changes its maximum width at different screen sizes.

This allows content to remain readable on large screens while still working properly on smaller devices.

The .container-fluid class creates a container that uses the full available width of the viewport.

<div class="container-fluid">

    Full Width Content

</div>

<div class="container">

    <h1 class="text-primary">
        My Website
    </h1>

    <p>
        Learn Bootstrap step by step.
    </p>

</div>

The content is placed inside a responsive Bootstrap container.

<div class="container bg-light p-4">

    <h2>
        Bootstrap Container
    </h2>

    <p>
        This container has a background.
    </p>

</div>

Bootstrap utility classes can be combined with the container class.

You can use Bootstrap spacing utilities to add additional padding to a container.

<div class="container p-5">

    Content

</div>

Here, p-5 adds padding around the content.

Bootstrap spacing utilities can also be used to add margin around container content.

<div class="container mt-5">

    Content

</div>

The mt-5 class adds top margin.

Containers are commonly used as the outer wrapper for Bootstrap rows.

<div class="container">

    <div class="row">

        <div class="col">
            Column 1
        </div>

        <div class="col">
            Column 2
        </div>

    </div>

</div>

A container can contain a row, and the row can contain columns. This is the basic structure of many Bootstrap layouts.

<div class="container">

    <div class="row">

        <div class="col-md-4">
            Left
        </div>

        <div class="col-md-8">
            Right
        </div>

    </div>

</div>

Bootstrap provides responsive container classes that can be used to control the maximum width at specific breakpoints.

Examples include:

• .container-sm
• .container-md
• .container-lg
• .container-xl
• .container-xxl

The .container-sm class provides a responsive container whose maximum width applies from the small breakpoint and above.

<div class="container-sm">

    Content

</div>

The .container-md class uses the container's maximum width from the medium breakpoint and above.

<div class="container-md">

    Medium Container

</div>

The .container-lg class applies its maximum width from the large breakpoint and above.

<div class="container-lg">

    Large Container

</div>

The .container-xl class applies its maximum width from the extra-large breakpoint and above.

<div class="container-xl">

    Extra Large Container

</div>

The .container-xxl class applies its maximum width from the extra-extra-large breakpoint and above.

<div class="container-xxl">

    XXL Container

</div>

<div class="container-md">

    <h2>
        Responsive Container
    </h2>

    <p>
        This container uses the medium breakpoint.
    </p>

</div>

This type of container is useful when you want a specific responsive behavior.

<div class="container-fluid bg-dark text-white p-5">

    <h1>
        Full Width Section
    </h1>

</div>

This is useful for full-width sections such as banners and hero areas.

A container is commonly placed inside a navbar to control the width of the navbar's content.

<nav class="navbar navbar-dark bg-dark">

    <div class="container">

        <a class="navbar-brand"
        href="#">
            My Website
        </a>

    </div>

</nav>

Containers are useful inside hero sections to keep headings and paragraphs aligned with the rest of the website.

<section class="bg-primary text-white p-5">

    <div class="container">

        <h1>
            Welcome
        </h1>

        <p>
            Build responsive websites.
        </p>

    </div>

</section>

A container can also be used inside a footer to keep footer content aligned and responsive.

<footer class="bg-dark text-white p-4">

    <div class="container">

        <p>
            © 2026 My Website
        </p>

    </div>

</footer>

A page can contain multiple containers. For example, different sections of a website can each have their own container.

<section>

    <div class="container">
        Section 1
    </div>

</section>

<section>

    <div class="container">
        Section 2
    </div>

</section>

A common Bootstrap page structure places a container inside a semantic section element.

<section class="py-5">

    <div class="container">

        <h2>
            About Us
        </h2>

        <p>
            Learn more about our company.
        </p>

    </div>

</section>

Containers help create responsive layouts by adapting their maximum content width according to the viewport.

This allows large screens to have controlled content widths while smaller screens can use the available space effectively.

The standard .container does not simply mean a fixed width on every device. Its maximum width changes according to Bootstrap's responsive breakpoints.

This is why the same container can look different on a mobile phone, tablet, and desktop screen.

<div class="container">

    <div class="row">

        <div class="col-md-4">
            Course 1
        </div>

        <div class="col-md-4">
            Course 2
        </div>

        <div class="col-md-4">
            Course 3
        </div>

    </div>

</div>

The container holds the row, and the row contains three responsive columns.

• Use containers to organize page content.
• Use .container for responsive maximum-width content.
• Use .container-fluid for full-width layouts.
• Use responsive container classes when specific breakpoint behavior is needed.
• Use containers together with rows and columns.
• Use spacing utilities to control padding and margin.
• Avoid unnecessary deeply nested containers.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
    name="viewport"
    content="width=device-width,
    initial-scale=1.0">

    <title>
        Bootstrap Containers
    </title>

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

</head>

<body>

<div class="container py-5">

    <h1 class="text-primary">
        Bootstrap Containers
    </h1>

    <p class="lead">
        Learn how Bootstrap containers work.
    </p>

    <div class="row mt-4">

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

            <div class="card">

                <div class="card-body">

                    <h5>
                        HTML
                    </h5>

                    <p>
                        Learn HTML basics.
                    </p>

                </div>

            </div>

        </div>

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

            <div class="card">

                <div class="card-body">

                    <h5>
                        CSS
                    </h5>

                    <p>
                        Learn CSS styling.
                    </p>

                </div>

            </div>

        </div>

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

            <div class="card">

                <div class="card-body">

                    <h5>
                        Bootstrap
                    </h5>

                    <p>
                        Learn responsive design.
                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

This example demonstrates a container, spacing utilities, a row, three responsive columns, and Bootstrap cards.