¿Qué son las columnas de compensación en Bootstrap 3 Grid System?

Posted on by Rudeus Greyrat

Compensación: se ve increíble cuando el contenido de nuestra página web es visible en el ancho completo de la ventana gráfica del ancho del dispositivo disponible. Pero en algunos casos, tenemos que proporcionar un área a los componentes de la página web que los rodea, lo que los hace lucir más impresionantes. Entonces, para lograr este objetivo, el arranque nos introduce en el concepto de compensación. La compensación es la forma de empujar o mover los objetos en la página web para proporcionar espacio a su alrededor.

Configuración del entorno: necesitamos agregar un enlace CDN de arranque a nuestro documento HTML para usar el desplazamiento de columnas como:

<!– Enlace CDN Bootstrap –>
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384 -1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anónimo”>

<!– Bootstrap CDN para JavaScript –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js” integridad=”sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T +ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13″crossorigin=”anónimo”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integridad=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p”crossorigin=”anónimo”></script>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integridad=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anónimo”></script>

Para implementar la Compensación usamos la clase ‘.offset-n’ donde ‘n’ especifica el ancho por el cual un componente tiene que moverse desde su posición original.

Sintaxis:

<div class="offset-n">
    //content of div tag
</div>

Desplazamiento de columnas: el desplazamiento de columnas se utiliza para mover o empujar una columna desde su posición original hasta un ancho o espacio especificado. Para implementar el desplazamiento de columnas, usamos la clase ‘.col-md-n’ con la clase ‘.col-md-offset-n’ que empuja la columna por n columnas.

Sintaxis:

<div class="col-md-n col-md-offset-n">
    //content of div tag
</div>

Ejemplo 1: El siguiente ejemplo demuestra el uso de la compensación de columnas:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  
  <!-- Bootstrap CDN link -->
  <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
        integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"  
        crossorigin="anonymous">
  <!-- Bootstrap CDN for JavaScript -->
  <script src=
          "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" 
          integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 
          crossorigin="anonymous">
  </script>
  
  <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
          integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
          crossorigin="anonymous">
  </script>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
          integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
          crossorigin="anonymous">
  </script>
  <style>
    .green {
      color: green;
    }
  </style>
  
  <title>Column Offsetting</title>
</head>
  
<body>
  <center>
    <div class="box">
      <h2 class="green">Welcome to GFG</h2>
      <br>
      <div class="row">
          <div class="col-md-4 offset-md-4 green">
            <h4>Hey Geek!</h4>
            <p>I'm a Offsetted column by four columns.</p>
          </div>
      </div>
  
      <div class="row">
          <div class="col-md-4 offset-md-3 green">
            <h4>Hey Geek!</h4>
            <p>I'm a Offsetted column by three columns.</p>
          </div>
      </div>
  
      <div class="row">
          <div class="col-md-4 offset-md-2 green">
            <h4>Hey Geek!</h4>
            <p>I'm a Offsetted column by two columns.</p>
  
          </div>
      </div>
  
      <div class="row">
          <div class="col-md-4 offset-md-1 green">
            <h4>Hey Geek!</h4>
            <p>I'm a Offsetted column by one columns.</p>
  
          </div>
      </div>
  
      <div class="row">
          <div class="col-md-4">
            <h4>Hey Geek!</h4>
            <p>I'm a Normal column.</p>
          </div>
      </div>
    </div>
  </center>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  
  <!-- Bootstrap CDN link -->
  <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous">
  <!-- Bootstrap CDN for JavaScript -->
  <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" 
          integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
          crossorigin="anonymous">
  </script>
  
  <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
          crossorigin="anonymous">
  </script>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
          integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
          crossorigin="anonymous">
  </script>
  <style>
    .green {
        color: green;
    }
  </style>
  
  <title>Column Offsetting</title>
</head>
  
<body>
  <center>
    <div class="box">
      <h2 class="green">GeeksforGeeks</h2> <br>
      <div class="row">
        <div class="col-md-4 green">
          <h4>Hey Geek!</h4>
          <p>I'm a normal columns.</p>
  
        </div>
  
        <div class="col-md-4 offset-md-4 green">
          <h4>Hey Geek!</h4>
          <p>I'm a Offsetted column by eight columns.</p>
  
        </div>
      </div>
  
      <div class="row">
        <div class="col-md-4 offset-md-4">
          <h4>Hey Geek!</h4>
          <p>I'm a Offsetted column by four columns.</p>
  
        </div>
      </div>
  
      <div class="row">
        <div class="col-md-4 green">
          <h4>Hey Geek!</h4>
          <p>I'm a Normal column.</p>
  
        </div>
  
        <div class="col-md-4 offset-md-4 green">
          <h4>Hey Geek!</h4>
          <p>I'm a Offsetted column by eight columns.</p>
  
        </div>
      </div>
    </div>
  </center>
</body>
  
</html>

Producción:

ventajas:

  • Le permite mover contenido en la página web fácilmente según sus necesidades.
  • Proporciona flexibilidad a su contenido.
  • Le ayuda a crear una interfaz de usuario atractiva organizando fácilmente el contenido en la página web.
  • Puede dividir fácilmente una fila en diferentes partes usando esto.

Publicación traducida automáticamente

Artículo escrito por abhisheksainiaggarwal 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 *