Contenedores

Utiliza los distintos tipos de clases para contenedores; observa la diferencia entre la clase .container y .row .

Class Descripción
.container-expand width: 100%.
.container max-width: 1000px.
.row width: 100%.

Características entre contenedores:

.container-expand = width 100%, margin, padding.

.container = max-width 1000px, paddings X e Y.

.row = width 100%, margin-top, margin-bottom, padding.

-- Propiedades de los contendores

CSS 

    .container-expand {
        width: 100%;
        box-sizing: border-box;
    }

    .container {
        width: 100%;
        max-width: 1000px;
        padding: 2.5rem 1rem;
        margin: 0 auto !important;
        box-sizing: border-box;
    }

    @media screen and (max-width: 1200px) {
        .container {
            padding: 2.5rem 1rem;
        }
    }

    .row {
        width: 100%;
        margin: 2.5rem auto !important;
    }

    .row:after,
    .container:after {
        clear: both;
        display: table;
        content: "";
    }

-- Ejemplo de uso

container-expand

container

row

row

HTML

-- Ejemplo de uso

container-expand

row

row

HTML

-- Utilidades

Clase Descripción
center-content Ver Propiedades
center-full-content Ver Propiedades

-- Ejemplo de uso .center-content / .center-full-content

HTML 

    

        

            

                
...

                
...

                ...

-- Propiedades .center-content

CSS 

    .center-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

-- Propiedades .center-full-content

CSS 

    .center-full-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }