Container in Bootstrap

The container in Bootstrap is used to set the padding around the content as well left and right margin to the content. Although, it is also used to align the content horizontally center on the page in the case of fixed width container. There are three types of Bootstrap container classes:

• Container(.container) - Having Fixed Width At Each Breakpoints
• Fluid Container(.container-fluid) - Having 100% Width At All Breakpoints
• Responsive Container(.container-breakpoint) - Having 100% width till the specified breakpoint & then fixed width for higher breakpoints.

Bootstrap Container

In Bootstrap .container class provides responsive fixed width container means it's width will be changed according to viewport width of the device. It is clear that it can not take full available width of the viewport. Although, it has by default left and right margin.

Why We Use .container Class ? Since it is a container for a row means it contains one or more than one row inside the container. While, a row is a container for columns.

Bootstrap Fluid Container

The .container-fluid class provides a full width container that covers complete available viewport width of the device. It can also a container for a row that is a container for Bootstrap columns. The Bootstrap fluid container will also takes complete width whenever the viewport is resized.

Responsive Container

Bootstrap responsive containers have 100% width till the specified breakpoint and then max-width for higher breakpoints.

For example, the .container-sm class takes 100% width to start until the sm breakpoint is reached. Then, it scales up with md, lg, xl, and xxl.

Bootstrap Responsive Container Classes:

• container-sm: It specifies 100% width till the sm breakpoint i.e. 540px and above 540px, it will contain fixed max-width.
• container-md: It specifies 100% width till the md breakpoint i.e. 720px and above 720px, it will contain fixed max-width.
• container-lg: It specifies 100% width till the lg breakpoint i.e. 960px and above 960px, it will contain fixed max-width.
• container-xl: It specifies 100% width till the xl breakpoint i.e. 1140px and above 1140px, it will contain fixed max-width.
• container-xxl: It specifies 100% width till the xxl breakpoint i.e. 1320px and above 1320px, it will contain fixed max-width.To learn more about container in Bootstrap, click here.