bootstrap
  1. bootstrap-container
PreviousNext

Bootstrap Container

Bootstrap provides a container class to add a responsive fixed width container to your content.

Syntax

To use the container class in your HTML, add the following code:

<div class="container">
  <!-- Your content here -->
</div>

There are also two additional classes you can use to control the width of your container:

  • container-fluid: This creates a full-width container that spans the entire width of the viewport.
  • container-{breakpoint}: This allows you to control the width of your container at specific breakpoints. For example, you can use container-md to make your container full width until the medium breakpoint.

Example

Here is an example of using the container class to create a simple layout:

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h2>Column 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur leo laoreet, malesuada velit non, cursus lectus. Quisque vestibulum lacus quis enim malesuada, ac molestie ipsum varius. Ut consectetur molestie nibh quis lobortis.</p>
      </div>
      <div class="col-sm-6">
        <h2>Column 2</h2>
        <p>Integer sit amet dignissim dui. Maecenas imperdiet enim sit amet dui tempor, a hendrerit sapien facilisis. Curabitur vel enim felis. Donec commodo justo mi, vitae sagittis nisl ullamcorper viverra. Vivamus interdum elit eu odio ultrices, ut sodales elit dignissim.</p>
      </div>
    </div>
  </div>
</body>
Try Playground

Explanation

In the code above, we used the following classes to create the layout:

  • container: this creates a fixed width container and centers the content within it.
  • row: this creates a row of columns within the container.
  • col-sm-6: this creates a column that takes up 6 out of 12 columns on small screens.

Note that the total column count must add up to 12 in a single row.

Use

Using the container, row, and column classes in Bootstrap allows you to create responsive layouts that adjust to different screen sizes.

Important Points

  • Bootstrap's container class is used to create a responsive fixed width container for your content.
  • You can use the additional classes container-fluid and container-{breakpoint} to create full width containers or containers with custom widths.
  • The row and column classes are used in conjunction with the container class to create responsive layouts.

Summary

Bootstrap's container class simplifies creating responsive layouts in web development. By using the container, row, and column classes, you can create consistent and visually appealing layouts for your content that adjust to different screen sizes.

SetupGrid
Published on: