Espaciado en Bootstrap con ejemplos

Posted on by Rudeus Greyrat

Bootstrap tiene muchas facilidades de clases para diseñar fácilmente elementos en HTML. Incluye varias clases de margen y relleno de respuesta para la modificación de la apariencia del elemento. Las utilidades de espaciado no tienen símbolos de puntos de interrupción para aplicar a los puntos de interrupción.
La siguiente sintaxis se utiliza en las diversas clases para agregar espacios: 

  • (propiedad)(lados)-(tamaño) para xs
  • (propiedad)(lados)-(punto de interrupción)-(tamaño) para sm, md, lg y xl.

Propiedad: Hay dos formas de agregar espaciado a los elementos.

  • m : Esta propiedad define el margen. Margen proporciona un borde o borde.
  • p : Esta propiedad define el relleno. Las propiedades de relleno se utilizan para generar espacio alrededor del contenido.

Lados: esto permite a los usuarios agregar espaciado en el contenido a un lado específico donde sea necesario.

  • t : margen-superior/relleno-superior.
  • b : margen-inferior/relleno-inferior.
  • l : margen-izquierda/relleno-izquierda.
  • r : margen derecho/relleno derecho.
  • x : para padding-left y padding-right/margin-left y margin-right.
  • y : para padding-top y padding-bottom/margin-top y margin-bottom.
  • en blanco : margen/relleno en todos los lados del elemento.

Tamaño: Esto permite a los usuarios agregar una cantidad específica de espacio a un nivel. 

  • 0 – 0px margen/relleno.
  • 1 – 4px margen/relleno.
  • 2 – 8px margen/relleno.
  • 3 – margen/relleno de 16 px.
  • 4 – 24px margen/relleno.
  • 5 – margen/relleno de 48 px.
  • automático : margen automático.

Punto de interrupción: los puntos de interrupción son puntos donde el contenido del sitio web puede ajustarse según el dispositivo y permitir mostrar el mejor diseño para el usuario.  

  • sm, md, lg y xl son los siguientes puntos de interrupción.

Sintaxis: 

  • Para el punto de interrupción – xs:
<div class="mt-4">
  • Para el punto de interrupción – md:
<div class="mt-md-4">
  • Para el punto de interrupción – lg:
<div class="mt-lg-4">
  • Para el punto de interrupción – xl:
<div class="mt-xl-4">

Tabla de espaciado sensible: 

Tamaño de pantalla Clase
Aparece en todos .ml-3
Aparece solo en xs .ml-3 .ml-sm-0
Aparece solo en sm .ml-sm-3 .ml-md-0
Aparece solo en md .ml-md-3 .ml-lg-0
Aparece solo en lg .ml-lg-3 .d-xl-0
Aparece solo en xl .ml-xl-3

Ejemplo 1: 

HTML

<!DOCTYPE html>
<html>
    <head>
     
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
         
        <!-- Link Bootstrap Js and Jquery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
        <title>
            GeeksForGeeks Bootstrap Spacing Example
        </title>
    </head>
     
    <body>
        <br>
        <tab>
        <h3>Padding And Margin</h3>
         
        <div class="container text-white">
            <br><br>
             
            <div class="pt-5 bg-success">
                GeeksForGeeks
            </div>
            <br>
             
            <div class="p-4 bg-success">
                GeeksForGeeks
            </div>
             
            <div class="m-4 pb-5 bg-success">
                GeeksForGeeks
            </div>
        </div>
    </body>
</html>

Producción: 

Ejemplo 2: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     
    <!-- Link bootstrap JS and Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
    <title>
        GeeksforGeeks Bootstrap Spacing Example
    </title>
</head>
 
<body>
 
    <div class="container"><br>
        <h4 style="color:green;">
            GeeksforGeeks is a regularly spaced.
        </h4>
         
        <h4 class="ml-5 ml-lg-0"style="color:green;">
            GFG Geeks1 has left margin visible on
            xs, sm and md displays.
        </h4>
    </div>
     
</body>
</html>                                       

Producción: 

Ejemplo 3: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     
    <!-- Link Bootstrap JS and Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
    <title>
        GeeksForGeeks Bootstrap Spacing Example
    </title>
</head>
 
<body>
    <div class="container"><br>
        <div class="mx-auto" style="width:300px;
                            background-color:green;">
            <h3 style="color:white;">GeeksForGeeks</h3>
        </div>
    </div>
</body>
</html>                   

Producción:

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *