Mise en forme des images dans Bootstrap

Bootstrap nous offre la possibilité en un ajout de classe de transformer l’apparence d’une image. Découvrons ensemble comment réaliser une modification simple et efficace d’une image avec Bootstrap.

Modifier l’apparence d’une image dans Bootstrap

Arrondir les bordures de votre image :

<img class="img-rounded" src="https://d13yacurqjgara.cloudfront.net/users/195163/screenshots/1755983/survey_2x.png" alt="Blueprint Wire illustration" />

Blueprint Wire illustration

Créer un effet « cercle » :

<img class="img-circle" src="http://d13yacurqjgara.cloudfront.net/users/195163/screenshots/1755983/survey_2x.png" alt="Blueprint Wire illustration" />

Blueprint Wire illustration

Créer un effet « Thumbnail » :

<img class="img-thumbnail" src="http://dl-web.dropbox.com/get/monbootstrap/img-article/blueprint.jpg?_subject_uid=189661990&amp;w=AABDO43DGt1Kj_50QS5UGC6wBcvZYrEMHg_MxjIwvDiEXA" alt="Blueprint Wire illustration" />

crédit image : imcatnoone

Ces articles pourraient vous intéresser

Bootstrap icons, la bibliothèque d’icônes 100% Bootstrap.

Intégrer de la vidéo en arrière plan

Créer une card produit style Asos

14 commentaires

- Guillome
- (8 octobre 2014 at 10 h 34 min)
Hey !
L’illustration « Cercle » et « Thumbnail » ne se voient pas !
- - Benoît Philibert
  - (8 octobre 2014 at 10 h 36 min)
  Comment ça? Dans le Jsfiddle? Car je les vois de mon côté.
- Guillome
- (9 octobre 2014 at 12 h 18 min)
Oui dans le Jsfiddle, sur plusieurs postes à plusieurs endroits 😉
- - Benoît Philibert
  - (9 octobre 2014 at 12 h 19 min)
  Yep j’ai eu un retour similaire je vais regarder
- - Benoît Philibert
  - (9 octobre 2014 at 12 h 23 min)
  Voilà c’est réglé !
- Ony
- (15 septembre 2015 at 14 h 09 min)
Bonjour Benoit,
J’essaye de mettre 6 logos en lignes dans un div container > puis un div row > puis dans un col-sm-2, ça s’affiche bien en ligne sur un grand écran, mais quand je rétréci ma fenêtre pour avoir une fenêtre du type téléphone, toutes mes images sont alignées verticalement. Est il possible d’en mettre genre 2 ou 3 par lignes pour que ça s’adapte vraiment à l’écran ?

Merci pour votre aide
- - Benoît Philibert
  - (15 septembre 2015 at 14 h 13 min)
  bonjour Ony, il faut simplement définir une classe col-xs-* suivit du nombre de colonne sur une ligne souhaitée.
  Par exemple:
  <div class="col-xs-3 col-sm-6"><img scr="" alt=""></div>
  
  Cela veut dire que quand l’affichage est « extra-small » col-xs-*, alors on affiche sur 3 colonnes. Quand l’affichage est « small » et plus (vu que nous n’avons pas défini de résolution « md » ou « lg ») alors on affiche sur 6 colonnes
  - Ony
    
    (15 septembre 2015 at 14 h 24 min)
    Merci beaucoup Benoit,
    Mais je n’arrive pas à voir l’exemple 🙁
    
    Ony
    - Ony
      
      (15 septembre 2015 at 14 h 25 min)
      
      Ouops désolé ca vient de s’afficher !
      
      Merci beaucoup !!
    - Benoît Philibert
      
      (15 septembre 2015 at 14 h 25 min)
      
      J’ai fais plusieurs update du commentaire désolé. Je n’ai pas de lien ou d’exemple précis, juste il faut ajouter col-xs-* suivi du nombre de colonne souhaitée.
      - Ony
        
        (15 septembre 2015 at 14 h 29 min)
        
        Super ! ca marche merci beaucoup !
- Adam
- (23 octobre 2015 at 9 h 31 min)
Thank you. Good work
- disnel
- (11 septembre 2016 at 8 h 38 min)
salut comment pourrais-le mettre a la fois circle et thumbnail pour une image
merci
- - Benoît Philibert
  - (21 septembre 2016 at 13 h 09 min)
  Bonjour, je vous conseille de modifier la version thumbnail dans les paramètres de bootstrap. Si vous utilisez la version core il faut le modifier sur le fichier less ou scss dédié. Sinon directement sur votre feuille de style css.

CommenterAnnuler

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Mise en forme des images