Tabla de contenidos
Bootstrap permite diseñar las páginas mediante un sistema de columnas o rejillas que nos ayudan en la disposición del contenido y su adaptación a los diferentes dispositivos. Este sistema, creado con flexbox, consiste en dividir la pantalla en filas, donde cada fila puede dividirse en 12 columnas o espacios (también permite diseños de más columnas, pero como base se tiene en cuenta una división estándar de 12 columnas). De esta forma podemos, por ejemplo, crear un diseño con dos columnas, una que ocupe 5 espacios y otra que ocupe 7 espacios, tal y como se muestra a continuación:
<div class="container"> <div class="row"> <div class="col-5">Contenedor de 5 columnnas</div> <div class="col-7">Contenedor de 7 columnna</div> </div> </div>
El sistema de contenedores o rejillas de Bootstrap se basa en contenedores flexibles que se escalan dependiendo del tamaño del dispositivo. Para ajustar los contenedores o rejillas disponemos de diferentes clases:
.container: el contenido aparece centrado y con un ancho fijo.
<div class="container"> ... </div>
.container-fluid: el contenido ocupa todo el ancho disponible (100%).
<div class="container-fluid"> ... </div>
Por lo tanto, lo primero que necesitamos para comenzar es definir un contenedor principal con la clase .container o .container-fluid que recoja nuestra página: filas y columnas.
Dentro de este container vamos a crear filas “row” y dentro de ellas, las columnas “col”. A continuación creamos un contenedor y una fila que contiene tres columnas:
<div class="container"> <div class="row"> <div class="col"> Primera de tres columnas </div> <div class="col"> Segunda de tres columnas </div> <div class="col"> Tercera de tres columnas </div> </div> </div>
También podríamos hacerlo usando las clases col-xx, donde xx es el tamaño de la columna (como máximo 12 columnas en una fila):
<div class="container"> <div class="row"> <div class="col-4"> Primera de tres columnas </div> <div class="col-4"> Segunda de tres columnas </div> <div class="col-4"> Tercera de tres columnas </div> </div> </div>
default
Funcionamiento de las rejillas utilizando las clases de tipo col-xx:
En la siguiente tabla se recoge un resumen del funcionamiento de la rejilla de Bootstrap dependiendo del tamaño de la pantalla:
Pantalla | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
Ancho máximo | None (auto) | 540px | 720px | 960px | 1140px |
Prefijo | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
default
Como es de esperar, también podemos especificar qué ancho definir para cada tipo de resolución indicando en cada elemento diferentes clases. Por ejemplo podemos especificar distintos tamaños de columna para xl, md y sm, tal y como se muestra en el siguiente ejemplo:
<div class="row"> <div class="col-xl-6 col-md-5 col-sm-4">prueba</div> <div class="col-xl-6 col-md-5 col-sm-4">prueba</div> </div>
default
default
Bootstrap ofrece la clase .d-none para ocultar contenido para todas las pantallas o .d-{sm,md,lg,xl}-none si queremos que se oculte en alguna resolución en concreto.
Para mostrar sólo los elementos en una resolución concreta se deberá especificar la clase .d-XX-block. Por ejemplo, con la clase .d-md-block se ocultaría el contenedor en todas las resoluciones menos en la intermedia.
Tamaño pantalla | Clase |
Oculto en todas | .d-none |
Oculto en xs | .d-none .d-sm-block |
Oculto en sm | .d-sm-none .d-md-block |
Oculto en md | .d-md-none .d-lg-block |
Oculto en lg | .d-lg-none .d-xl-block |
Oculto en xl | .d-xl-none |
Visible en todas | .d-block |
Visible en xs | .d-block .d-sm-none |
Visible en sm | .d-none .d-sm-block .d-md-none |
Visible en md | .d-none .d-md-block .d-lg-none |
Visible en lg | .d-none .d-lg-block .d-xl-none |
Visible en xl | .d-none .d-xl-block |
0