BOOTSTRAP 4 CONTAINER
container is the most basic layout in bootstrap. It is used to hold other bootstrap elements and set content margin.
Bootstrap require containing element to wrap the contents of webpage and it provides 2 container classes to choose from : (i) container
and (ii) container-fluid
Container is a necessary element to create bootstrap's grid system, container contains row and row contain container of columns which form a grid system.
The 2 different container in bootstrap are:
.container
.container-fluid
Below there are two boxes showing difference between .container and .container-fluid.
You can see above the difference between .container
and .container-fluid
classes.
The .container
class creates a container with a fixed width for a range of device sizes, while .container-fluid
created a container of width 100% for all device size.
1. Bootstrap container class
The .container
class in bootstrap provides a responsive container of specific fixed width for a range of device size, means for a range of width of device the width of .container
is fixed and after the next breakpoint width of .container
is different. Example for smaller device (>576px) container width is 540px.
The width of .container
box for different device size are as follows:
Extra Small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
|
---|---|---|---|---|---|
max-width of container | 100% (with 15px padding to left and right) |
540px | 720px | 960px | 1140px |
In the example below there is a box with .container
class, run the code and adjust output size to see the effect.
Exmple: container class
2. Bootstrap container-fluid class
The .container-fluid
class in bootstrap creates a responsive container of width 100% width for all device size.
It creates a 15px padding on both left and right side of the container.
In the example below "container-fluid" covers full screen regardless of device size.
Exmple
Bootstrap container vs container-fluid
Differences between .container
and .container-fluid
are as follows:
- Maximum width of
.container
is fixed for a range of device size but maximum width of.container-fluid
is always 100%. - When width of the window is resized then
.container
size changes only at any breakpoint but width of.container-fluid
changes continuously. - Use
.container
when you want your box to change width only at breakpoints, or use.container-fluid
to chage width at every little difference.
Bootstrap container no padding
Both .container
and .container-fluid
has 15px padding to it's left and right.
You can remove padding of containers using another bootstrap class .p-0
.
The class .p-0
add CSS property padding: 0
to the container.
Exmple
Bootstrap container example
Here are few example of bootstrap containers using bootstrap utilities.
Bootstrap container example
This container has 1.5rem padding, white text color and dark background.
Bootstrap container example
This container has 1rem padding, white text color and blue background.
Bootstrap container example
This container has 1rem padding, white text color, green background and text in center.
Exmple
- Bootstrap requires a containing element that wraps HTML elements inside it to let element use bootstrap's functionality.
- "container" class has fixed width for for different device sizes, yet responsive.
- "container-fluid" is responsive and covers 100% width of device.
- Both "container" and "container-fluid" has 15px padding on left and right side.