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:
<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 3yr ago
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