Containers
Containers not only allow us to encapsulate content, but they are also the first step to a responsive design. A single design compatible with smart phones, tablets, smart TVs and desktops
Containers type
Bootnative, like Bootstrap, comes with 3 containers type:
container, adopt the default breakpoint,xs.container-fluid, which sets awidth: 100%at all breakpoints.container-{breakpoint}, when specifying a breakpoint, any greater than or equal to specified withmaxWidthis honored, otherwise,width: "100%"is set.
| <576px, xs | >= 576, sm | >= 768, md | >= 992, lg | >= 1200, xl | |
|---|---|---|---|---|---|
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% |