Bootstrap v5.1 - Layout: Offset y Margin Utilities

Hola, este es un tutorial complementario a Clases del Curso de Bootstrap 4 en donde abordare con más detalle sobre Offset en Bootstrap 5.

¿Que significa offset?

Esto significa compensación.
Los offset nos permiten colocar un espacio de izquierda a derecha a las columnas.

Ejemplo 1:

      <div class="container">
        <div class="row">
            <div class="col offset-md-6">1</div>
        </div>
        <div class="row">
            <div class="col-8 offset-md-2">2</div>
        </div>
        <div class="row">
            <div class="col-3 offset-9 offset-md-0">3</div>
        </div>
    </div>

Esta sería una posible solución al tercer reto de la clase Reto: La grilla de Bootstrap.

Sintaxis

offset-tamaño-numero

Sí, así de fácil es. El número se refiere al número de columnas que vamos a correr nuestro elemento.
El tamaño es opcional. y nos sirve para indicar a partir de que tamaño de pantalla queremos que la clase offset tenga efecto.

Esta compensación también se puede hacer con los márgenes

Hay 3 maneras de usar el margen en este tema:

• m: margin
• ms: margin start
• me: margin end

Sintaxis

m-tamaño-auto

Y al igual que con offset, el tamaño es opcional.

Ejemplo 2:

    <div class="container">
        <div class="row">
            <div class="col col-md-6 ms-md-auto"></div>
        </div>
        <div class="row">
            <div class="col-8 m-md-auto "></div>
        </div>
        <div class="row">
            <div class="col-3 ms-auto ms-md-0"></div>
        </div>
    </div>

Para finalizar, no olviden que la mejor fuente siempre es la documentación oficial y la encuentran aquí.