Containers

Containers are the most basic layout element in Metro UI.

About

Containers are the most basic layout element in Metro UI. 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;
                        }
                    }