Containers
Structural element used to group and organize content within a webpage and acts as a boundary or a wrapper for various elements, providing a consistent layout and styling across different sections of the page.
HPU Container comes with 3 different types:
- .hpu-container: the default type which sets max-width at each responsive breakpoint.
- .hpu-container-{breakpoint}: sets the container width 100% of the viewport width until a specified breakpoint.
- .hpu-container-fluid: sets the container width 100% at all the breakpoints.
Max Width Table
The table below shows when a container wrapper's width is 100% of the viewport width or in its max-width value.
| Container Breakpoints |
Extra Small Screens < 576px |
Small Screens ≥ 576px |
Medium Screens ≥ 768px |
Large Screens ≥ 992px |
X-Large Screens ≥ 1200px |
XX-Large Screens ≥ 1400px |
|---|---|---|---|---|---|---|
| .hpu-container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .hpu-container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .hpu-container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .hpu-container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .hpu-container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .hpu-container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .hpu-container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Responsive Container in Action
See how the responsive container reacts on different viewport width. Click the button below to see demo.