Layouts con Bootstrap 4: cómo crear una web responsive

El diseño web responsive o adaptable es una metodología de diseño en el que la apariencia de la página web se adapta a la resolución del dispositivo con el que se está visualizando, por lo que podemos tener un diseño único tanto para ordenadores, como tabletas o móviles.

Para implementar un diseño responsive podemos hacer uso de las media queries, que es un módulo introducido en CSS3 que permite especificar distintas reglas CSS dependiendo de si se cumplen unas u otras condiciones, aunque lo más común es utilizarlas para aplicar reglas según las dimensiones de la pantalla. Con el siguiente código, por ejemplo, estableceríamos un color de fondo azul para la página en anchos menores a 576px y rojo en tamaños superiores:

body {
  background-color:blue
}

@media (min-width: 768px) {
  body {
    background-color: red
  }
}

Bootstrap utiliza las media queries para definir 5 breakpoints o “puntos de ruptura” que dependen del ancho de la pantalla del dispositivo.

Tenemos pantallas con tamaño extra pequeño, como teléfonos en orientación vertical, cuyas clases utilizan el sufijo xs de extra small (menos de 576px); pequeño, como teléfonos en orientación horizontal, con sufijo sm de small (menos de 768px); medio, como tablets, con sufijo md, de medium (menos de 992px); grandes, como pantallas de PC, con sufijo lg, de large (menos de 1200px) y extra grande, con sufijo xl de extra large (más de 1200px).

Instalación

Si sólo queremos utilizar Boostrap para crear un layout, podemos incluir simplemente bootstrap-grid.min.css, que sólo incluye el sistema de rejilla y las utilidades Flex. Pero lo normal es que queramos utilizar otros estilos, así que incluimos bootstrap.min.css dentro del <head>, bien desde la ruta en la que hayamos subido el framework a nuestro servidor, o desde el CDN de Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Contenedores

Lo primero que tenemos que definir es un contenedor usando las clases container o container-fluid. Con container-fluid podemos crear contenedores con un ancho de 100%. Este es el CSS que define esta clase en Bootstrap 4:

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Por otra parte, con container creamos contenedores centrados, con un ancho fijo. El ancho máximo de este contenedor depende del ancho de la pantalla. Por ejemplo, si la ventana tiene al menos un ancho de 576px pero es menor de 768px, el ancho máximo del contenedor será de 540px, porque se aplicaría el primer media query, además de la regla principal:

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Filas

Dentro de los contenedores tendremos filas, que se representan con la clase row, y que realmente son contenedores del Modelo de cajas flexibles de CSS o flexbox, una especificación que facilita enormemente crear diseños que cambien dinámicamente al cambiar la resolución de la pantalla.

<div class="container">
  <div class="row">
	...
  </div>
</div>

El uso de flexbox es una de las grandes novedades de Bootstrap 4 respecto de la versión anterior, en que se utilizaban contenedores div y la propiedad float para definir el diseño. Una desventaja de flexbox, como siempre, es el soporte en versiones antiguas de los navegadores, por lo que si necesitas soportar Internet Explorer 8 o Internet Explorer 9, y aunque existen hacks para añadir soporte, puede que sea recomendable que sigas utilizando Bootstrap 3.

Si consultamos el CSS de Bootstrap veremos que estas filas se definen como cajas o contenedores flexibles utilizando la propiedad display: flex. La propiedad flex-wrap: wrap, además, indica que sus hijos pueden fluir en varias líneas si no tienen espacio suficiente, en lugar de tener que mantenerse en la misma línea, que es el valor por defecto (flex-wrap: nowrap):

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

Columnas

Dentro de las filas tenemos columnas, para las cuales tenemos multitud de clases dependiendo del tamaño que queramos darles. Estas columnas se convierten en elementos flexibles por el simple hecho de ser hijas de una caja flexible.

Para definir nuestras columnas lo más sencillo es usar la clase col, lo que hará que todas las columnas tengan el mismo peso a la hora de dividir el ancho. Si nos fijamos en su CSS, veremos que es gracias a la propiedad flex-grow: 1, que indica que todos los elementos con clase col tendrán un peso de 1 unidad:

.col {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -ms-flex-positive: 1;
      flex-grow: 1;
  max-width: 100%;
}

En este ejemplo tenemos, centrados, gracias a la clase container, tres filas de elementos. Estas filas se dividen a su vez en 1, 2 y 3 columnas respectivamente, cada una del mismo tamaño que sus hermanas:

<div class="container text-white">
  <div class="row">
    <div class="col bg-primary">col</div>
  </div>

  <div class="row">
    <div class="col bg-primary">col</div>
    <div class="col bg-danger">col</div>
  </div>

  <div class="row">
    <div class="col bg-primary">col</div>
    <div class="col bg-danger">col</div>
    <div class="col bg-warning text-dark">col</div>
  </div>
</div>

Clase col en Bootstrap

También podemos usar clases del tipo .col-num para indicar cuántas partes (de 12 totales en que se divide la fila) debe ocupar el elemento. Por ejemplo, .col-1 indica que queremos un ancho máximo de 1/12 (8.333333%). Bootstrap, como otros muchos frameworks, utiliza filas basadas en un peso de 12 unidades por la flexibilidad que nos proporciona la cantidad de divisores que tiene: 12 se puede dividir exactamente entre 12, 6, 4, 3 y 2 columnas.

.col-1 {
  -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
      flex: 0 0 25%;
  max-width: 25%;
}

....

El siguiente ejemplo utiliza estas clases col numeradas para asignar más espacio a unas columnas que a otras:

<div class="container text-white">
  <div class="row">
    <div class="col-4 bg-primary">col-4</div>
    <div class="col-4 bg-danger">col-4</div>
    <div class="col-4 bg-warning text-dark">col-4</div>
  </div>

  <div class="row">
    <div class="col-6 bg-primary">col-6</div>
    <div class="col-6 bg-danger">col-6</div>
  </div>

 <div class="row">
    <div class="col-8 bg-primary">col-8</div>
    <div class="col-2 bg-danger">col-2</div>
    <div class="col-2 bg-warning text-dark">col-2</div>
  </div>
</div>

Clases col de distinto peso en Bootstrap

Si la suma total de los pesos es más de 12, al tener la clase row la propiedad flex-wrap: wrap, las columnas se mostrarán en una nueva fila. Si suman menos de 12, simplemente no llenarán el ancho total:

<div class="container text-white bg-dark">
  <div class="row">
    <div class="col-4 bg-primary">col-4</div>
    <div class="col-4 bg-danger">col-4</div>
    <div class="col-8 bg-warning text-dark">col-8</div>
  </div>

  <div class="row">
    <div class="col-6 bg-primary">col-6</div>
    <div class="col-3 bg-danger">col-3</div>
  </div>
</div>

Wrapping en filas en Bootstrap

Columnas adaptables a la resolución

Si queremos que el peso de las columnas dependa del ancho de la pantalla del dispositivo, podemos usar los breakpoints definidos por Bootstrap. De esta forma, si tenemos una clase col-mum, esta aplicará para pantallas extra pequeñas y superiores; col-sm-mum para pantallas pequeñas y superiores, col-md-mum para pantallas de tamaño medio y superiores, col-lg-mum para pantallas grandes y superiores, y col-xl-mum para pantallas extra grandes.

Por ejemplo, el siguiente código define que cada columna tenga un ancho de un 25% (3/12) en pantallas extra pequeñas y pequeñas, 50% en pantallas medias y 100% en pantallas grandes o extra grandes, como puedes comprobar si lo pruebas en tu editor y redimensionas la ventana del navegador:

<div class="container text-white">
	<div class="row">
		<div class="col-3 col-md-6 col-lg-12 bg-primary">
		col-3 col-md-6 col-lg-12
		</div>
		<div class="col-3 col-md-6 col-lg-12 bg-danger">
		col-3 col-md-6 col-lg-12
		</div>
	</div>
</div>

Si sólo definimos el tamaño de las columnas para uno de los breakpoints, las columnas ocuparán un 100% antes de ese breakpoint (por lo que cada columna aparecerá en una línea posterior) y el tamaño indicado a partir del breakpoint. En este ejemplo, se mostrarán ambas columnas una debajo de la otra hasta llegar al tamaño de pantalla media, momento en que pasarán a mostrarse una al lado de la otra ocupando la mitad de la pantalla cada una:

<div class="container text-white">
	<div class="row">
		<div class="col-md-6 bg-primary">col-md-6</div>
		<div class="col-md-6 bg-danger">col-md-6</div>
	</div>
</div>

También podemos combinar columnas con peso (columnas con clase col-num) con columnas sin peso (columnas con clase col). En este caso lo que ocurriría es que se le daría el ancho indicado a las columnas con peso, y el resto del ancho se repartiría equitativamente entre las columnas sin peso:

<div class="container text-white">
  <div class="row">
    <div class="col bg-primary">col</div>
    <div class="col-2 bg-danger">col-2</div>
    <div class="col bg-warning text-dark">col</div>
  </div>
</div>

Combinando columnas con peso y sin peso en Bootstrap

Por último, si queremos que una columna se ajuste a su contenido, podemos usar las clases col-auto o col-breakpoint-auto

<div class="container text-white">
  <div class="row">
    <div class="col-auto bg-primary">col-auto</div>
    <div class="col bg-danger">col</div>
    <div class="col bg-warning text-dark">col</div>
  </div>
</div>

Columnas con ancho automático en Bootstrap

Margen

Para añadir margen izquierdo entre columnas, en lugar de crear columnas sin contenido, podemos añadir a una columna una clase del tipo offset-peso u offset-breakpoint-peso, cuyos sufijos de breakpoint funcionan de forma similar a los sufijos de las clases col-. En este caso el peso puede ir de 0 (ningún espacio, sólo en las clases con sufijo de breakpoint) a 11.

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

...

En este ejemplo mostramos una opción para alinear dos columnas de igual ancho a cada lado de la pantalla, con un espacio igual en medio:

<div class="container text-white">
	<div class="row">
	  <div class="col-4 bg-primary">col-4</div>
	  <div class="col-4 offset-4 bg-danger">col-4 offset-4</div>
	</div>
</div>

Márgenes en Bootstrap

Alineación vertical

Podemos alinear las columnas verticalmente dentro de las filas mediante clases que aprovechan de nuevo el modelo de cajas flexibles de CSS, con clases del estilo align-items-valor.

  • align-items-start: alinea las columnas al borde superior de la fila (equivalente a utilizar la propiedad align-items: flex-start)
  • align-items-end: alinea las columnas al borde inferior de la fila
  • align-items-center: alinea las columnas al centro de la fila
  • align-items-baseline: alinea las columnas por las líneas base de los textos que contienen
  • align-items-stretch: valor por defecto; estira las columnas para que coincidan con el alto de la fila
.align-items-start {
  -ms-flex-align: start !important;
      align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
      align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
      align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
      align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
      align-items: stretch !important;
}

En este ejemplo asignamos una altura de un 25% de la pantalla a la fila para ver cómo las columnas se alinean a la parte superior al usar align-items-start:

<div class="container text-white bg-dark">
  <div class="row align-items-start h-25">
    <div class="col bg-primary">col</div>
    <div class="col bg-danger">col</div>
    <div class="col bg-warning text-dark">col</div>
  </div>
</div>

Columnas alineadas con align-items-start en Bootstrap

En este ejemplo las columnas se alinean a la parte inferior de la fila por el uso de align-items-end

<div class="container text-white bg-dark">
  <div class="row align-items-end h-25">
    <div class="col bg-primary">col</div>
    <div class="col bg-danger">col</div>
    <div class="col bg-warning text-dark">col</div>
  </div>
</div>

Columnas alineadas con align-items-end en Bootstrap

En este ejemplo las columnas se alinean en el centro al usar align-items-center:

<div class="container text-white bg-dark">
  <div class="row align-items-center h-25">
    <div class="col bg-primary">col</div>
    <div class="col bg-danger">col</div>
    <div class="col bg-warning text-dark">col</div>
  </div>
</div>

Columnas alineadas con align-items-center en Bootstrap

En este ejemplo las columnas se alinean por las líneas base de los textos que contienen, de acuerdo con la clase align-items-baseline:

<div class="container text-white bg-dark">
  <div class="row align-items-baseline h-25">
    <div class="col bg-primary h1">col</div>
    <div class="col bg-danger h2">col</div>
    <div class="col bg-warning text-dark h3">col</div>
  </div>
</div>

Columnas alineadas con align-items-baseline en Bootstrap

En este ejemplo las columnas se estiran para ajustarse a la altura definida para la fila, gracias a align-items-stretch:

<div class="container text-white bg-dark">
  <div class="row align-items-stretch h-25">
    <div class="col bg-primary h1">col</div>
    <div class="col bg-danger h2">col</div>
    <div class="col bg-warning text-dark h3">col</div>
  </div>
</div>

Columnas alineadas con align-items-stretch en Bootstrap

Alineación horizontal

Para alinear las columnas horizontalmente podemos utilizar clases del tipo justify-content-valor, que utilizan la propiedad justify-content del modelo flexible:

  • justify-content-start, para alinear a la izquierda (por defecto)
  • justify-content-center, para alinear al centro
  • justify-content-end, para alinear a la derecha
  • justify-content-between, para alinear con espacios iguales entre las columnas
  • justify-content-around, que es similar al anterior con igual espacio a la iquierda y derecha de cada columna
.justify-content-start {
  -ms-flex-pack: start !important;
      justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
      justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
      justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
      justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
      justify-content: space-around !important;
}

En este ejemplo las columnas se alinean a la izquierda en base a justify-content-start:

<div class="container text-white">
  <div class="row justify-content-start bg-dark">
    <div class="col-auto bg-primary">col-auto</div>
    <div class="col-auto bg-danger">col-auto</div>
    <div class="col-auto bg-warning text-dark">col-auto</div>
  </div>
</div>

Columnas alineadas con justify-content-start en Bootstrap

En este ejemplo las columnas se alinean a la derecha por el uso de justify-content-end:

<div class="container text-white">
  <div class="row justify-content-end bg-dark">
    <div class="col-auto bg-primary">col-auto</div>
    <div class="col-auto bg-danger">col-auto</div>
    <div class="col-auto bg-warning text-dark">col-auto</div>
  </div>
</div>

Columnas alineadas con justify-content-end en Bootstrap

En este ejemplo las columnas se alinean en el centro gracias a justify-content-center:

<div class="container text-white">
  <div class="row justify-content-center bg-dark">
    <div class="col-auto bg-primary">col-auto</div>
    <div class="col-auto bg-danger">col-auto</div>
    <div class="col-auto bg-warning text-dark">col-auto</div>
  </div>
</div>

Columnas alineadas con justify-content-center en Bootstrap

En este ejemplo las columnas se alinean con espacios iguales entre ellas al usar justify-content-between:

<div class="container text-white">
  <div class="row justify-content-between bg-dark">
    <div class="col-auto bg-primary">col-auto</div>
    <div class="col-auto bg-danger">col-auto</div>
    <div class="col-auto bg-warning text-dark">col-auto</div>
  </div>
</div>

Columnas alineadas con justify-content-between en Bootstrap

En este ejemplo las columnas se alinean con espacios iguales entre ellas al usar justify-content-around:

<div class="container text-white">
  <div class="row justify-content-around bg-dark">
    <div class="col-auto bg-primary">col-auto</div>
    <div class="col-auto bg-danger">col-auto</div>
    <div class="col-auto bg-warning text-dark">col-auto</div>
  </div>
</div>

Columnas alineadas con justify-content-around en Bootstrap

Filas dentro de filas

Las columnas pueden contener otras filas a su vez, para subdividir su contenido. Sin embargo, una fila no puede tener una fila como hija directa, debe estar siempre dentro de una columna:

<div class="container text-white">
  <div class="row bg-dark h-25">
    <div class="col bg-primary">col</div>
    <div class="col-6 bg-info">
		<div class="row">
		    <div class="col-6 bg-danger">col-6</div>
		    <div class="col-6 bg-warning text-dark">col-6</div>
		</div>
    </div>
  </div>
</div>

Filas dentro de filas en Bootstrap




2 pensamientos en “Layouts con Bootstrap 4: cómo crear una web responsive”

  1. Dejo una web muy útil:
    https://bootswatch.com/
    Incluye varios temas (que apenas modifican bootstrap más allá de los colores), y que sirve también de ejemplo para entender como se ve cada elemento usando este framework.

    Para cada elemento se puede ver el código que lo genera y el resultado.

    Salu2!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.