Sirven para estructurar, a nivel de diseño, la información.
Deben estar dentro de un container. Existen containers de dos tipos:
Inmediatamente dentro del container debemos incluir filas, es decir, div’s con el class row. Cada fila tiene como máximo (a no ser que lo modifiquemos), 12 posiciones.
En el siguiente ejemplo tenemos una fila con tres columnas, por tanto, cada columna ocupará 4 posiciones
<div class="container" style="background-color: red;">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
Si no especificamos el tamaño de las columnas, por defecto su tamaño se repartirá equitativamente entre las columnas.
En el siguiente ejemplo asignamos un tamaño a las columnas:
Si las columnas no caben, Bootstrap la pasará para abajo:
<div class="row">
<div class="col-3">1</div>
<div class="col-10">2</div>
</div>
Ejercicios Bootstrap
Ejercicio pasar a Bootstrap
Partiendo del siguiente código HTML de una página web, hacer las modificaciones necesarias para tener una página Bootstrap de cuatro columnas:
<img src="https://via.placeholder.com/250/250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio
incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
<img src="https://via.placeholder.com/250/250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
<img src="https://via.placeholder.com/250/250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
<img src="https://via.placeholder.com/250/250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
Ejercicio rejilla Bootstrap
Realizar una página web con la siguiente estructura utilizando Bootstrap.
Cambiar el tamaño de las columnas en función del tamaño de la pantalla
<div class="row">
<div class="col-12 col-md-3">1</div>
<div class="col-12 col-md-9">2</div>
</div>
Breakpoints de la rejilla de Bootstrap 4:
Nombre | Prefix | Size |
---|---|---|
Extra Small | .col- (sin interfijo) | <576px |
Small | .col-sm | ≥576px |
Medium | .col-md | ≥768px |
Large | .col-lg | ≥992px |
Extra Large | .col-xl | ≥1200px |
Ejercicio: rejilla bootstrap en función de la pantalla
Tamaño extra small
Tamaño mediano
Tamaño grande
La fila de abajo son diez posiciones. Para lograr que cada columna tenga el tamaño correcto lo que haremos es no especificar el tamaño de las columnas inferiores (utilizando el class col-lg) y de estas forma las columnas se repartirán equitativamente su tamaño.