[RESOLU] comment faire floter du texte dans une card de boostrap

21 mars 2021, 21:17

bonjour a tous
je souhaiterais faire floater du texte dans l exemple d une card de boostrap
j ai essaye une multitude de chose mais sans succès

Code : Tout sélectionner

<div class="card mb-3" style="width: 100%;">
  <div class="row g-0">
        <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
	<div class="col-md-4">
      <img src="image/phil" style="width:10%"alt="...">
    </div>
  </div>
</div>

22 mars 2021, 01:50

flotter comment ?

Ton image n'a pas d'extension: image/phil

22 mars 2021, 07:34

bonjour
merci pour la réponse
je souhaiterais que si le texte est trop grand il puisse entoure l image a gauche et en dessous de celle ci
pour l image on pourrait faire phil.jpg

le plus important est de garder la structure de la card

22 mars 2021, 11:52

image capture stp ? montre en dessinant ce que tu veux faire

22 mars 2021, 17:33

merci pour l aide

en utilisant les cards de boostrap

voici ce que j ai
https://zupimages.net/up/21/12/3bsd.jpg

voici ce que je souhaiterais pour les écrans supérieur a 752 px
https://zupimages.net/up/21/12/74yb.jpg

et pour les écrans en dessous de 752 px
ceci

https://zupimages.net/up/21/12/eoua.jpg

22 mars 2021, 19:26

voici ce que je souhaiterais pour les écrans supérieur a 752 px
https://zupimages.net/up/21/12/74yb.jpg

image en float right

et pour les écrans en dessous de 752 px
ceci
https://zupimages.net/up/21/12/eoua.jpg

image en display block

22 mars 2021, 19:37

merci pour la reponse
donc je dois ajouter juste cet attribut a la balise image

22 mars 2021, 19:47

non, dans le css suivant la largeur, avec les média query, mettre une class à ton image pour la gérer dans le css.

Je le répète mais le mieux est d'apprendre sans bootstrap quand on ny connais rien du tout, ça permet de savoir qui fait quoi car bootstrap à des valeur CSS dans tous les sens.

22 mars 2021, 21:11

merci pour l aide
ah ben oui j y avais pas pense
cela fonctionne
j ai encore un petit soucis en plus du display block , comment je pourrais faire pour bloquer la taille de l image

22 mars 2021, 21:20

propriété width mais ya peut être bootstrap qui met une élasticité à ton image... regarde ta console pour voir les styles appliquées à ton image (F12)

22 mars 2021, 21:26

ok
je regarde a cela
merci
je reviens quand tout sera nickel

23 mars 2021, 00:46

voila cela fonctionne

j ai une autre question dans le cas ou sur la même page
dans un bloc je veux faire floater une image a droite
puis dans l autre bloc je veux faire floater l image a gauche

comment je pourrais faire du coup dans le css
avec l attribut img

pour l instant j ai ceci mis juste pour les images de droite

Code : Tout sélectionner

@media (min-width:762px) {
img {
  float: right;
  width: 50%;
}
}
@media (max-width:762px) {
img {
  display: block;
  width: 100% !important;
}
}

23 mars 2021, 10:34

voila j ai trouve
j ai utilise ce code css
et j ai place l id a chaque image

Code : Tout sélectionner

     <style type="text/css">
         @media (min-width:762px) {
         #example1 { float: left; }
         #example2 { float: right; }
         img {
         width: 50%;
         }
         }
         @media (max-width:762px) {
         img {
         display: block;
         width: 100% !important;
         }
         }
      </style>

23 mars 2021, 11:48

Attention qu'un id s'utilise qu'une fois dans la page, une classe peut s'utiliser plusieurs fois.

http://css.mammouthland.net/selecteurs-css-class-id.php

23 mars 2021, 11:52

merci pour la réponse
j aurais du donc pour le coup
écrire ceci

Code : Tout sélectionner

   <style type="text/css">
         @media (min-width:762px) {
         gauche { float: left; }
        droite { float: right; }
         img {
         width: 50%;
         }
         }
         @media (max-width:762px) {
         img {
         display: block;
         width: 100% !important;
         }
         }
      </style>

[RESOLU] comment faire floter du texte dans une card de boostrap

Qui est en ligne