How to wrap a page content with Bootstrap

Bootstrap is a front-end framework that facilitates the creation of responsive web designs. It's used with HTML and CSS to provide various layout components such as typography, forms, and buttons.

Note: To know more about Bootstrap and how to use it, please refer to the following links:

• What is bootstrap?
• How to apply Bootstrap styling to HTML

To wrap a page content with Bootstrap, we use the .container class. Containers are used to pad and align the content of a webpage. There are three different types of containers used in Bootstrap:

• container
• container-fluid
• container-{breakpoint}

The container class

This is the default container class and sets a max-width at each breakpoint to create a fix-width container.

Note: Breakpoints are customizable widths that dictate the behavior of a responsive webpage across different screen sizes.

Syntax

Example

The code below demonstrates how the container class can be used to wrap page content:

Explanation

• Line 9: We assign the container classto the div tag.
• Line 10: We wrap the h1 tag in the container class.

The container-fluid class

This container spans the entire width of the screen. To learn more about this class, please refer to this link.

Syntax

The container-{breakpoint} class

This container is full-width until a specified breakpoint is reached, after which the max-width will change to a higher breakpoint.

There are five types of breakpoints:

• container-sm: The container is 100% wide until the small breakpoint is reached.
• container-md: The container is 100% wide until the medium breakpoint is reached.
• container-lg: The container is 100% wide until the large breakpoint is reached.
• container-xl: The container is 100% wide until the extra-large breakpoint is reached.
• container-xxl: The container is 100% wide until the extra-extra-large breakpoint is reached.

Syntax

Any of the other responsive containers can replace the container-sm class in the syntax above.

The max-width comparisons

The table below shows how the max-width of each container compares with the other: