Elementos básicos de HTML

Search…
Bootstrap 3 le 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 ya vas a ver cambios en la tipografía y otros elementos.
Encabezados
Utiliza los encabezados <h1> a <h6> normalmente en tus páginas.
También puedes utilizar la etiqueta <small> para agregar texto secundario como se muestra en el siguiente ejemplo:
Alineación
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.
Tablas
Para aplicarle los estilos de Bootstrap a las tablas debes agregar la clase table:
1
<table class="table">
2
  ...
3
</table>
Copied!
Veamos un ejemplo que puedes editar para probar diferentes configuraciones:
​Ver la documentación de Bootstrap.
Tablas con bandas
Agrega la clase table-striped para intercalar el fondo de las filas entre blanco y gris:
1
<table class="table table-striped">
2
  ...
3
</table>
Copied!
Tablas con bordes
Agrega la clase table-bordered para agregar bordes a la tabla:
1
<table class="table table-bordered">
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
<table class="table table-hover">
2
  ...
3
</table>
Copied!
Filas contextuales
Puedes utilizar las clases active, success, info, warning y danger sobre los <tr>, <th> o <td> para cambiar el color de las filas o celdas:
1
<!-- En filas -->
2
<tr class="active">...</tr>
3
<tr class="success">...</tr>
4
<tr class="warning">...</tr>
5
<tr class="danger">...</tr>
6
<tr class="info">...</tr>
7
​
8
<!-- En celdas (`td` or `th`) -->
9
<tr>
10
  <td class="active">...</td>
11
  <td class="success">...</td>
12
  <td class="warning">...</td>
13
  <td class="danger">...</td>
14
  <td class="info">...</td>
15
</tr>
Copied!
​Abrir en la documentación de Bootstrap​
Formularios
Bootstrap le aplica algunos estilos a los formularios pero debes seguir la siguiente estructura:
1
<form>
2
  <div class="form-group">
3
    <label for="nombre">Nombre:</label>
4
    <input type="text" id="nombre" class="form-control">
5
  </div>
6
  <button type="submit" class="btn btn-default">Enviar</button>
7
</form>
Copied!
Para tener en cuenta:
Encierra los campos de entrada con un div que tenga la clase form-group.
Agrégale la clase form-control al input.
Utiliza un <button> con type="submit". En la siguiente sección vamos a hablar más de los botones.
Para los checkboxes utiliza la siguiente estructura:
1
<div class="checkbox">
2
  <label>
3
    <input type="checkbox"> Check me out
4
  </label>
5
</div>
Copied!
Existen muchas variaciones sobre los formularios. Para más información abre la documentación en Bootstrap.
Botones
Agrega la clase btn sobre las etiquetas <a> y <button>, en conjunto con una de las siguientes clases para crear un botón más estilizado: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger o btn-link.
1
<button type="button" class="btn btn-default">Default</button>
Copied!
Veamos un ejemplo con diferentes tipos de botones:
​Abrir en la documentación de Bootstrap​
Tamaños
Utiliza las clases btn-lg, btn-sm y btn-xs para cambiar el tamaño del botón.
Mostrar en bloque
Utiliza la clase btn-block para que el botón ocupe el 100% del elemento que lo contiene.
Botones deshabilitados
Agrega la propiedad disabled sobre los <button> y la clase .disabled sobre los <a> para que el botón parezca deshabilitado:
1
<a href="#" class="btn btn-primary disabled">Primary link</a>
Copied!
Imágenes
Para hacer las imágenes responsive agrega la clase img-responsive a <img>:
1
<img src="..." class="img-responsive" alt="Responsive image">
Copied!
Utiliza la clase img-rounded para aplicarle borders redondeados a la imagen:
1
<img src="..." alt="..." class="img-rounded">
Copied!
Utiliza la clase img-circle para que la imagen aparezca en un círculo:
1
<img src="..." alt="..." class="img-circle">
Copied!
Utiliza la clase img-thumbnail para agregarle un bordes redondeados y un borde adicional a la imagen:
1
<img src="..." alt="..." class="img-thumbnail">
Copied!
Primeros pasos
Componentes
Last modified 3yr ago
Copy link
Contents
Resaltar la fila sobre la que pasa el mouse
Botones deshabilitados
Imágenes