Bootstrap 4 utiliza una librería llamada Reboot que aplica estilos a los elementos básicos de HTML como encabezados, párrafos, formularios, tablas, etc. Con sólo incluir Bootstrap en tu página vas a ver cambios en la tipografía y otros elementos.
Breakpoints
Bootstrap define los siguientes breakpoints que te recomendamos usar en tu aplicación.
1
/* Bootstrap es mobile first */
2
3
/* Small devices (landscape phones, 576px and up) */
4
@media(min-width: 576px){}
5
6
/* Medium devices (tablets, 768px and up) */
7
@media(min-width: 768px){}
8
9
/* Large devices (desktops, 992px and up) */
10
@media(min-width: 992px){}
11
12
/* Extra large devices (large desktops, 1200px and up) */
13
@media(min-width: 1200px){}
Copied!
También vas a encontrar las abreviaciones xs, sm, md, lg y xl en varias clases de Bootstrap para controlar la forma en que se organizan y se muestran los elementos en diferentes tipos de pantallas.
Por ejemplo, text-center se utiliza para centrar texto en todos los tipos de pantalla, mientras que text-md-center aplicaría a pantallas de 768px o más.
Nota: Los breakpoints en esta versión de Bootstrap cambiaron. En Boostrap 3sm eran tabletas (768px o más), md eran pantallas de escritorio (992px o más) y lg eran pantallas de 1200px o más.
Tipografía
Por defecto Bootstrap 4 utiliza la fuente nativa de cada dispositivo.
Además de los encabezados h1 a h6, Boostrap ahora incluye las clases display-1, display-2, display-3 y display-4 para crear encabezados que sobresalen sobre los normales:
Utiliza la clase lead en los párrafos que quieres que sobresalgan y la clase blockquote en las etiquetas <blockquote> para citar:
Tamaño
Para controlar el tamaño de la fuente te recomendamos utilizar rem en vez de pixeles. De esa forma puedes cambiar el tamaño de la fuente en todo tu sitio cambiando únicamente el tamaño del elemento raíz html.
Utiliza media queries para aumentar el tamaño de la fuente en dispositivos de mayor tamaño. Por ejemplo:
1
html{
2
/* toma el valor por defecto del navegador, sin embargo también puedes usar px */
3
font-size: 1rem;
4
}
5
6
@media(min-width: 768px){
7
html{font-size: 1.2rem;}
8
}
9
10
@media(min-width: 992px){
11
html{font-size: 1.4rem;}
12
}
13
14
@media(min-width: 1200px){
15
html{font-size: 1.6rem;}
16
}
Copied!
Utilidades
Utiliza las clases text-left, text-center, text-right y text-justify en párrafos para alinearlos a la izquierda, centro, derecha y justificados respectivamente.
También existen text-sm-left, text-md-right, etc. para controlar la alineación en diferentes dispositivos.
Para crear imágenes responsive (que se adapten al tamaño del contenedor) utiliza la clase img-fluid.
Para aplicar bordes redondeados utiliza las clases rounded (todos los bordes), rounded-top, rounded-right, rounded-bottom, rounded-left, rounded-circle (para crear un círculo) y rounded-0 (para quitar los bordes redondeados).
Para aplicarle los estilos de Bootstrap a las tablas debes agregar la clase table (esto es necesario para evitar conflictos con otros componentes que utilicen tablas):
1
<tableclass="table">
2
...
3
</table>
Copied!
Veamos un ejemplo que puedes editar para probar diferentes configuraciones:
Encabezados
Utiliza las clases thead-light y thead-dark sobre la etiqueta <thead> para cambiar el color de fondo del encabezado.
Tablas con bordes
Agrega la clase table-bordered para agregar bordes a la tabla:
1
<tableclass="table table-bordered">
2
...
3
</table>
Copied!
Tablas con bandas
Agrega la clase table-striped para intercalar el fondo de las filas:
1
<tableclass="table table-striped">
2
...
3
</table>
Copied!
Resaltar la fila sobre la que pasa el mouse
Utiliza la clase table-hover para que cuando pases el mouse sobre una fila cambie el fondo a gris:
1
<tableclass="table table-hover">
2
...
3
</table>
Copied!
Filas contextuales
Puedes utilizar las clases table-active, table-primary, table-secondary, table-success, table-info, table-warning y table-danger, table-dark y table-light sobre los <tr>, <th> o <td> para cambiar el color de las filas o celdas:
1
<!-- En filas -->
2
<trclass="table-active">...</tr>
3
<trclass="table-success">...</tr>
4
<trclass="table-warning">...</tr>
5
<trclass="table-danger">...</tr>
6
<trclass="table-info">...</tr>
7
8
<!-- En celdas (`td` or `th`) -->
9
<tr>
10
<tdclass="table-active">...</td>
11
<tdclass="table-success">...</td>
12
<tdclass="table-warning">...</td>
13
<tdclass="table-danger">...</td>
14
<tdclass="table-info">...</td>
15
</tr>
Copied!
Tablas responsive
Agrega la clase table-responsive para hacer la tabla responsive (con scroll horizontal).
También puedes limitar a qué dispositivos aplica el responsive utilizando table-responsive-sm, table-responsive-md, etc. Desde ese punto en adelante, la tabla se va a comportar de forma normal.