Bootstrap Container

Container Bootstrap is a fundamental concept in Bootstrap, a popular front-end framework for building responsive and mobile-first websites. It provides a way to create a centered and responsive layout by encapsulating content within a fixed-width or fluid container.

Bootstrap offers three types of containers:

  1. .container: A fixed-width container that adapts to the viewport width at different breakpoints. It provides a responsive, fixed-width container.

  2. .container-fluid: A full-width container that spans the entire width of the viewport, providing a fluid layout.

  3. .container-{breakpoint}: Containers that are fixed-width until a specified breakpoint, then become fluid. Breakpoints can be sm, md, lg, xl, and xxl.

Examples

1. .container

This container adapts to different screen sizes but remains centered with fixed widths at each breakpoint.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Container Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a fixed-width container.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

2. .container-fluid

This container spans the entire width of the viewport, providing a fluid and full-width layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fluid Container Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <h1>Hello, world!</h1>
        <p>This is a fluid container.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

3. .container-{breakpoint}

These containers are fixed-width up to a specified breakpoint and become fluid above that breakpoint.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Breakpoint Container Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-md">
        <h1>Hello, world!</h1>
        <p>This is a container that is fixed-width until the medium breakpoint, then becomes fluid.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Usage in a Real-World Scenario

You can use these containers to create various layouts for your web pages. For instance, if you have a header that should span the entire width of the page but want the main content to be centered and responsive, you can use a combination of .container-fluid and .container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mixed Container Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header class="container-fluid bg-primary text-white text-center p-3">
        <h1>Website Header</h1>
    </header>
    <main class="container my-5">
        <h2>Main Content</h2>
        <p>This is the main content of the page, centered and responsive.</p>
    </main>
    <footer class="container-fluid bg-secondary text-white text-center p-3">
        <p>Website Footer</p>
    </footer>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example, the header and footer span the full width of the viewport, while the main content is centered and adapts to different screen sizes.



IT and Digital Marmeting keyboard_arrow_leftPrevious
Nextkeyboard_arrow_right

Online Learner

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us

Copyright 2023-2025 © All rights reserved.

logo
Frontend
Backend