Open In App

Containers in Bootstrap with examples

Last Updated : 20 Sep, 2024
Comments
Improve
Suggest changes
6 Likes
Like
Report

In Bootstrap, containers are fundamental building blocks for structuring your webpage's content. They help to organize and encapsulate content within a defined device or viewport. By using containers, you ensure that your website is responsive, with elements aligned properly, and adaptable to different screen sizes for a smooth and consistent layout presentation.

There are two container classes in Bootstrap:  

ClassDescription
.containerFixed-width layout for webpage content, ensuring consistent padding and alignment.
.container-fluidFluid-width layout for webpage content, spanning the full width of the viewport.

Let's look at each of the above two classes in detail with examples:

1 .container: Fixed-Width Layout

The .container class creates a fixed-width layout that adjusts its size based on the current viewport or device. This class ensures that content within it is aligned and padded appropriately, providing a visually consistent presentation across different screen sizes.

Example: In the example we utilize Bootstrap 5 to create a layout with a dark background, displaying "GeeksforGeeks" in green text and a description in light text, within a container.

HTML 
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" 
          rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">

    </script>
</head>

<body>
    <!-- Since we are using the class container, the below
        div will not take complete width of its parent. -->
    <div class="container mt-4">
        <div class="bg-dark">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>

            <p class="text-light">
                A computer science portal for geeks.
            </p>
        </div>
    </div>
</body>

</html>

Output:


Containers-in-Bootstrap
Containers in Bootstrap Example Output

2 .container-fluid: Full-Width Layout

The .container-fluid class provides a fluid-width layout, meaning the container stretches to occupy the full width of the viewport. This makes it ideal for layouts that need to cover the entire screen, ensuring that the content adjusts seamlessly across all devices and screen sizes.

Example: In this example we use Bootstrap to create a responsive layout with a dark background, displaying "GeeksforGeeks" in green text and a description in light text.

HTML 
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <link href=
"https://getbootstrap.com/docs/5.2/assets/css/docs.css" 
          rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">

    </script>
</head>

<body>
    <!-- Since we are using the class container-fluid, the 
        below div will expand whenever the viewport is resized. -->
    <div class="mt-4 container-fluid bg-dark">
        <h1 class="text-success">GeeksforGeeks</h1>

        <p class="text-light">A computer science portal for geeks.</p>

    </div>
</body>

</html>

Output:

Containers-in-Bootstrap2
Containers in Bootstrap Example Output

C

chaitanyashah707
Improve
Article Tags :

Explore

Lightbox