17. Usando grids y contenedores en Bootstrap

Bootstrap es una de las herramientas más populares cuando se trata de desarrollo web front-end. Es conocido por su facilidad de uso y eficiencia en la creación de sitios web responsivos. Una de las características más notables de Bootstrap es el uso de grillas y contenedores. En este capítulo, profundizaremos en el uso de grids y contenedores en Bootstrap.

Entendiendo el contenedor

Los contenedores en Bootstrap son elementos fundamentales para crear diseños responsivos. Son los componentes básicos de cualquier página web Bootstrap. Un contenedor es simplemente un div con la clase .container o .container-fluid. La diferencia entre los dos es que .container tiene un ancho máximo fijo en píxeles en diferentes tamaños de pantalla, mientras que .container-fluid se expande para llenar el ancho de la pantalla.

<div class="contenedor">
  <!-- Contenidos -->
</div>

<div class="contenedor-fluido">
  <!-- Contenidos -->
</div>

Comprensión de la cuadrícula

Bootstrap utiliza un sistema de cuadrícula para crear diseños. La cuadrícula está dividida en 12 columnas, lo que le permite crear diseños complejos y responsivos con facilidad. Las clases de cuadrícula se aplican a divs para controlar el diseño de la página. Las clases van desde .col- (para dispositivos extrapequeños como teléfonos) hasta .col-xl- (para dispositivos extragrandes como televisores de gran escala).

<div class="fila">
  <div class="col-">
    <!-- Contenidos -->
  </div>
  <div class="col-">
    <!-- Contenidos -->
  </div>
</div>

Usar rejillas y contenedores juntos

Para crear un diseño responsivo en Bootstrap, normalmente se comienza con un contenedor. Dentro de este contenedor, crea una 'fila', que es una línea horizontal que contiene columnas. Delante de las filas, colocas las columnas, que son donde realmente va tu contenido. La suma total de las columnas de una fila debe ser igual a 12.

<div class="contenedor">
  <div class="fila">
    <div class="col-6">
      <!-- Contenidos -->
    </div>
    <div class="col-6">
      <!-- Contenidos -->
    </div>
  </div>
</div>

En este ejemplo, tenemos dos columnas, cada una de las cuales ocupa la mitad del ancho de la pantalla (6/12) en todos los tamaños de pantalla. Puede ajustar el número después de 'col-' para controlar el ancho de la columna en diferentes tamaños de pantalla.

Conclusión

Las cuadrículas y contenedores de Bootstrap son herramientas poderosas que le permiten crear diseños complejos y responsivos con facilidad. Son la base de cualquier página web Bootstrap y es esencial comprenderlos si desea convertirse en un desarrollador front-end eficaz. Con práctica, podrás crear diseños de página completa con facilidad, usando solo cuadrículas y contenedores.

Espero que este capítulo le haya dado una comprensión clara de cómo usar grids y contenedores en Bootstrap. En el próximo capítulo, exploraremos algunos componentes más de Bootstrap y cómo se pueden utilizar para mejorar aún más sus sitios web.

Siguiente página del libro electrónico gratuito:

64Componentes Bootstrap: botones, formularios, carrusel.

6 minutos