Grid de Bootstrap 4

Sirven para estructurar, a nivel de diseño, la información.

Deben estar dentro de un container. Existen containers de dos tipos:

<div class="container" style="background-color: red;">
    Contenedor de ancho fijo
</div>

  <div class="container-fluid" style="background-color: red;">
    Contenedor ancho fluído
 </div>

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:

<div class="row">
	<div class="col-3">1</div>
	<div class="col-9">2</div>
</div>

<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:

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.