Nuevas Clases de Bootstrap 4 para Margin y Padding

Conocimiento es poder!

Nuevas Clases de Bootstrap 4 para Margin y Padding

Cada vez que Boostrap lanza una nueva versión, nosotros los programadores web tenemos que escribir menos CSS.

Gracias a las nuevas Clases de Bootstrap 4 para margin y padding ahora podemos modificar facílmente la apariencia o posición de los elementos con solo llamar clases como mt-3, pt-2, ml-5, etc.

Significados

  • m = margin
  • p = padding
  • t = top
  • b = bottom
  • l = left
  • r = right
  • x = left y right
  • y = top y bottom

Puedes combinar o mezclar estas letras con los números del 0 al 5.

El margin o padding que crean estas clases son en “rem” y no en “px” (pixels) y los tamaños son los siguientes,

Tamaños

  • 0 = 0 rem (para eliminar el margin o padding)
  • 1 = .25 rem
  • 2 = .5 rem
  • 3 = 1 rem
  • 4 = 1.5 rem
  • 5 = 3 rem

Cabe destacar que todas estas clases para margin y padding son responsive o adaptables.

Algunos ejemplos

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  
  <body>
    <div class="container">
      <h1 class="mt-3">Bootstrap 4 margin y padding clases</h1>

        <div class="row">

          <div class="col-sm-12 col-md-6 col-lg-6 mt-3 mb-5 border">
            <p class="mt-0">Margin Top 0 (mt-0).</p>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6 mt-3 mb-5 border">
            <p class="mt-1">Margin Top 1 (mt-1).</p>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6 mt-3 mb-5 border">
            <p class="mt-2">Margin Top 2 (mt-2).</p>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6 mt-3 mb-5 border">
            <p class="mt-3">Margin Top 3 (mt-3).</p>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6 mt-3 mb-5 border">
            <p class="mt-4">Margin Top 4 (mt-4).</p>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6 mt-3 mb-5 border">
            <p class="mt-5">Margin Top 5 (mt-5).</p>
          </div>            
        </div>
      </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Como podrás ver, en el código anterior hago uso de la clase mt-3 (margin-top 3rem;) en el heading 1 (h1).

mt-3 (margin-top 3rem;) y mb-5 (margin-bottom 5rem;) para darle separación a las columnas y en los párrafos uso las clases mt del 0 al 5 para que tengas una idea de la separación que crean estas clases.

En la imagen anterior es solo un ejemplo con margin-top (mt) puedes hacer lo mismo mezclando las diferentes clases, mt-3, mb-5, ml-3, mr-1, mx-4, etc.

Lo bueno de estas clases es que las puedes usar con cualquier elemento HTML como div, párrafos, columnas, filas y demás.

Más información en la documentación de Bootstrap 4

https://getbootstrap.com/docs/4.2/utilities/spacing/

Si tienes algo que compartir sobre Bootstrap o CSS lo puedes hacer en los comentarios. Gracias por leer y compartir, hasta la próxima.

Tags: ,

Deja tus comentarios o preguntas!

This site uses Akismet to reduce spam. Learn how your comment data is processed.