Elementos básicos de HTML
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.

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:

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.

Para aplicarle los estilos de Bootstrap a las tablas debes agregar la clase table:
<table class="table">
...
</table>
Veamos un ejemplo que puedes editar para probar diferentes configuraciones:

Agrega la clase table-striped para intercalar el fondo de las filas entre blanco y gris:
<table class="table table-striped">
...
</table>

Agrega la clase table-bordered para agregar bordes a la tabla:
<table class="table table-bordered">
...
</table>

Utiliza la clase table-hover para que cuando pases el mouse sobre una fila cambie el fondo a gris:
<table class="table table-hover">
...
</table>

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:
<!-- En filas -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- En celdas (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

Bootstrap le aplica algunos estilos a los formularios pero debes seguir la siguiente estructura:
<form>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" class="form-control">
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
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:
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
Existen muchas variaciones sobre los formularios. Para más información abre la documentación en Bootstrap.

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.
<button type="button" class="btn btn-default">Default</button>
Veamos un ejemplo con diferentes tipos de botones:

Utiliza las clases btn-lg, btn-sm y btn-xs para cambiar el tamaño del botón.

Utiliza la clase btn-block para que el botón ocupe el 100% del elemento que lo contiene.

Agrega la propiedad disabled sobre los <button> y la clase .disabled sobre los <a> para que el botón parezca deshabilitado:
<a href="#" class="btn btn-primary disabled">Primary link</a>

Para hacer las imágenes responsive agrega la clase img-responsive a <img>:
<img src="..." class="img-responsive" alt="Responsive image">
Utiliza la clase img-rounded para aplicarle borders redondeados a la imagen:
<img src="..." alt="..." class="img-rounded">
Utiliza la clase img-circle para que la imagen aparezca en un círculo:
<img src="..." alt="..." class="img-circle">
Utiliza la clase img-thumbnail para agregarle un bordes redondeados y un borde adicional a la imagen:
<img src="..." alt="..." class="img-thumbnail">
Copy link
On this page
Encabezados
Alineación
Tablas
Tablas con bandas
Tablas con bordes
Resaltar la fila sobre la que pasa el mouse
Filas contextuales
Formularios
Botones
Tamaños
Mostrar en bloque
Botones deshabilitados
Imágenes