Grid de Bootstrap 4

Contactar con el profesor

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>
Grid de Bootstrap 4 1

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>

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://placeholdit.imgix.net/~text?txtsize=33&txt=250%C3%97250&w=250&h=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://placeholdit.imgix.net/~text?txtsize=33&txt=250%C3%97250&w=250&h=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://placeholdit.imgix.net/~text?txtsize=33&txt=250%C3%97250&w=250&h=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://placeholdit.imgix.net/~text?txtsize=33&txt=250%C3%97250&w=250&h=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 Bootrstap

Realizar una página web con la siguiente estructura utilizando Bootstrap.

ejercicio bootstrap 4

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:

NombrePrefixSize
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

Bootstrap 4, grid para pantalla pequeña

Tamaño mediano

Bootstrap 4, grid para pantalla mediana

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.

Bootstrap 4, grid para pantalla grande
← Instalación
Offset →

Aviso Legal | Política de privacidad