Containers
Containers are the most basic layout element in Metro 4.
About
Containers are the most basic layout element in Metro 4.
Choose from a responsive, fixed-width container (meaning its max-width
changes at each breakpoint) or fluid-width (meaning it’s 100%
wide all the time).
While containers can be nested, most layouts do not require a nested container.
Fluid container
Use .container-fluid
for a full width container, spanning the entire width of the viewport.
<div class="container-fluid">
<!-- content here -->
</div>
Responsive container
Use .container
when you need container with responsive feature.
<div class="container">
<!-- content here -->
</div>
Responsive container use next rules:
container {width: 100%;}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 1452px) {
.container {
max-width: 1360px;
}
}