Bootstrap - Containers

This chapter will discuss about Bootstrap containers. Containers are used to pad content within them.

Containers are required for default grid system (Grid system uses a series of containers, rows and columns to align content). Containers are used to contain, pad, and center the content within them. Containers can also be nested, though most layouts don't require a nested container.

There are three different container classes in Bootstrap:

  • .container (sets responsive max-widths).

  • .container-{breakpoint} (width: 100% until specified breakpoint).

  • .container-fluid (width: 100% at all breakpoints).

How the max-width of the container (when compared to original .container and .container-fluid) varies across each breakpoint is shown in the below table:

Examples of the same can be seen in chapter Grid Demo

Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 X-Large
≥1200px		 XX-Large
≥1400px
.container

100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Default Containers

Use .container class which creates a responsive fixed-width container.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container mt-4">
        <div class="bg-light">
          <h2 class="text-success text-center">Tutorialspoints</h2>
          <h5 class="text-primary text-center">Bootstrap - Container</h5>
          <p>Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns. This is known as the grid system.
            Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns.</p>
        </div>
      </div>
    </body>
    </html>

Responsive Containers

  • Use responsive containers to declare a class that is 100% wide until the specific breakpoint is reached, after that use max-widths for all subsequent breakpoints.

  • Use the .container-sm|md|lg|xl classes to decide whether the container should be responsive or not.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-sm text-success  border mt-2">Tutorialspoints breakpoint-sm</div>
      <div class="container-md text-success  border mt-2">Tutorialspoints breakpoint-md</div>
      <div class="container-lg text-success  border mt-2">Tutorialspoints breakpoint-lg</div>
      <div class="container-xl text-success  border mt-2">Tutorialspoints breakpoint-xl</div>
      <div class="container-xxl text-success border mt-2">Tutorialspoints breakpoint-xxl</div>
    </body>
    </html>

Fluid Containers

Use the .container-fluid class to create a full width container. They span the entire width of the screen.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-fluid">
        <h2 class="text-success text-center">Tutorialspoints</h2>
        <h5 class="text-primary text-center">Bootstrap - Container</h5>
        <p>Container is used to set the margin of the content. It contains row elements and the row elements are containers
          of columns. This is known as the grid system.
          Container is used to set the margin of the content. It contains row elements and the row elements are containers
          of columns.</p>
      </div>
    </body>
    </html>
Advertisements