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.
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:
<table class="table">
  ...
</table>
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:
<table class="table table-striped">
  ...
</table>
Tablas con bordes
Agrega la clase table-bordered para agregar bordes a la tabla:
<table class="table table-bordered">
  ...
</table>
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:
<table class="table table-hover">
  ...
</table>
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:
<!-- 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>
​Abrir en la documentación de Bootstrap​
Formularios
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.
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.
<button type="button" class="btn btn-default">Default</button>
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:
<a href="#" class="btn btn-primary disabled">Primary link</a>
Imágenes
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">

Primeros pasos

Componentes

Last modified 2mo ago