Artículos
Bootstrap

Imágenes con estilo en Bootstrap

25/Sep/2013

Dentro del framework Bootstrap es muy fácil dar estilo a las imágenes y conseguir efectos sobre ellas. Bootstrap nos ofrece tres posibilidades de crear imágenes con estilo. Los estilos que podemos crear son:

  • Imagen con los bordes redondeados, la imagen aparece con los bordes redondeados.
  • Imagen en un circulo, la imagen aparece dentro de un circulo.
  • Imagen como un thumbnail, el efecto es que la imagen está con los bordes redondeados y alrededor de ella hay un borde, que tiene también los bordes redondeados. Entre la imagen y el borde hay un espacio en blanco. Al más puro estilo de retrato.

A cada uno de los estilos, Bootstrap le ha asignado una clase. De esta manera si queremos insertar imágenes con estilo en Bootstrap valdrá con asignar dicha clase a la imagen.

<img src="imagen.png" class="estilo_bootstrap">

Las clases que representan los estilos indicados arriba son:

  • img-rounded, para los bordes redondeados.
  • img-circle, para la imagen en un circulo.
  • img-thumbnail, para los thumbnails.

De esta forma, si queremos dar los diferentes estilos solo tenemos que utilizar las clases:

<img src="imagen.png" class="img-circle">
<img src="imagen.png" class="img-rounded">
<img src="imagen.png" class="img-thumbnail">

El efecto que tendremos será el siguiente:

imagen-estilo-bootstrap

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios