Bootstrap 4 Containers


Containers

We use containers to organize content well. There are currently two classes of containers in Bootstrap. They are .container and container-fluid. These are described below -

.container

.container-fluid


Fixed container

A bootstrap .container class is a fixed-width container. This container has a fixed width. It has separate screens available for extra-large screen, large screen, medium screen, small screen. If you want to use it, you have to use .container class.

A table explains how their max-width screens change.

Extra small screen Small screen Medium screen Large screen Extra large screen
max-width 100% 540px 720px 960px 1140px

Example Code

<div class="container">
<h4>This is container class</h4>
</div>

Full width container

The Bootstrap .container-fluid Class is a full-width responsive container. It has 100% width on all screens. It will require a container-fluid class to use.

Example Code

<div class="container-fluid">
<h4>This is container-fluid class</h4>
</div>

Container with padding

By default, .container and .container-fluid classes have 15px padding on the right and left. But there is no padding on the top and bottom.

We can apply extra padding in .container and .container-fluid classes. To apply it we have to use padding classes like p-1, p-2, p-3, p-4, and so on. It is explained by the example below.

In this example we use .p-5 padding classes

.container

.container-fluid

In this example we use .p-5 padding classes

Example Code

<div class="container-fluid p-5">
<p>.container-fluid</p>
</div>

Container with border, color and background-color

In bootstrap, we can add borders, colors, background-colors to containers. For this we need to use so many classes of (.border, .text-color, .bg-color).

This is an example

This is an paragraph

Example Code

<div class="container border bg-dark text-white p-5">
<h4>This is an example</h4>
<p>This is an paragraph</p>
</div>

Responsive containers

Bootstrap has a number of Responsive Classes for arranging containers on all screens. These are container-xl, container-lg, container-md, container-sm.

This is an example container-xl

This is an paragraph

This is an example container-lg

This is an paragraph

This is an example container-md

This is an paragraph

This is an example container-sm

This is an paragraph

Example Code

<div class="container-xl border bg-primary text-white p-5">
<h4>This is an example of container-xl</h4>
<p>This is an paragraph</p>
</div>
<div class="container-lg border bg-secondary text-white p-5">
<h4>This is an example of container-lg</h4>
<p>This is an paragraph</p>
</div>
<div class="container-md border bg-info text-white p-5">
<h4>This is an example of container-md</h4>
<p>This is an paragraph</p>
</div>
<div class="container-sm border bg-danger text-white p-5">
<h4>This is an example of container-sm</h4>
<p>This is an paragraph</p>
</div>