♦ BootStrap4 Containers
♣ About BootStrap4 Containers
Containers in BootStrap4 are used to define categorical padding for the HTML elements.Containers are useful in shaping the way a website layout looks.
♣ Containers in BootStrap4
There exist various variants of container.Below is a tabular explanation of BootStrap4 Containers
| Container-Type | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px |
| .container-md | 100% | 100% | 720px | 960px | 1140px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% |
♣ Example1: .container BootStrap4
In this example, the very basic variant of containers, ".container" is illustrated..container is a responsive class type which aligns itself to center with resizing the available side space.
This is a general container variant which aligns and resizes conveniently according to browser window size. For more detail check the table above.
Example
Input:
Output:
♣ Example2: .container-sm
In this example, a small variant of containers, ".container-sm" is illustrated..container-sm is a responsive class type which is 100% wide until small(576px wide) breakpoint.
That is the element is 100% wide until the width of browser-window is strictly less than 576px.
Example
Input:
Output:
♣ Example3: .container-md
In this example, medium variant of containers, ".container-md" is illustrated..container-md is a responsive class type which is 100% wide until medium(768px wide) breakpoint.
That is the element is 100% wide until the width of browser-window is strictly less than 768px.
Example
Input:
Output:
♣ Example4: .container-lg
In this example, a large variant of containers, ".container-lg" is illustrated..container-lg is a responsive class type which is 100% wide until large(992px wide) breakpoint.
That is the element is 100% wide until the width of browser-window is strictly less than 992px.
Example
Input:
Output:
♣ Example5: .container-xl
In this example, extra-large variant of containers, ".container-xl" is illustrated..container-xl is a responsive class type which is 100% wide until extra-large(1200px wide) breakpoint.
That is the element is 100% wide until the width of browser-window is strictly less than 1200px.
Example
Input:
Output:
♣ Example6: .container-fluid
In this example, fluid variant of containers, ".container-fluid" is illustrated..container-fluid is a responsive class type which is 100% wide always.
That is the element is 100% wide irrespective of browser-windows size.
Example
Input:
Output: