Mise en forme des images

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" />     Créer un effet « cercle » : […]

Posté le par Benoît Philibert|5358 vues

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" />

Blueprint Wire illustration

crédit image : imcatnoone


Ces articles pourraient vous intéresser

Tags

14 commentaires

    • Guillome
    • (8 octobre 2014 at 10 h 34 min)

    Hey !
    L’illustration « Cercle » et « Thumbnail » ne se voient pas !

    • 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 😉

    • Yep j’ai eu un retour similaire je vais regarder

    • 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

    • 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 !!

        • 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

    • 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.

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

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