Containers
Containers are a fundamental building block of any website. Minimalism-UI comes with two different types of containers:
- .wrapper which sets a different .max-width at each responsive breakpoint.
- .wrapper-fluid which is .width: 100% at all breakpoints.
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes. The following table shows how breakpoints in Minimalism-UI works:
|
Extra small
(<= 576px) |
Small and up
(> 576px) |
Medium and up
(> 768px) |
Large and up
(> 992px) |
Extra large
(> 1200px) |
|
|---|---|---|---|---|---|
| .wrapper | 100% | 540px | 720px | 960px | 1140px |
| .wrapper-sm | 100% | 540px | 720px | 960px | 1140px |
| .wrapper-md | 100% | 100% | 720px | 960px | 1140px |
| .wrapper-lg | 100% | 100% | 100% | 960px | 1140px |
| .wrapper-xl | 100% | 100% | 100% | 100% | 1140px |
| .wrapper-fluid | 100% | 100% | 100% | 100% | 100% |