Comment faire floater du texte dans une card de boostrap
Résolu/Fermé
flexi2202
Messages postés
3798
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
3 mai 2024
-
22 mars 2021 à 06:39
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 - 23 mars 2021 à 09:30
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 - 23 mars 2021 à 09:30
A voir également:
- Comment faire floater du texte dans une card de boostrap
- Corinne copie un texte sur le web et le colle dans un document avec l'option "texte non formaté" (aussi appelée "texte sans mise en forme"). qu'est-ce qui est conservé ? - Forum Bureautique
- Retrouver un texte caché dans une image ✓ - Forum Graphisme
- Comment retranscrire un entretien audio en texte - Guide
- Excel cellule couleur si condition texte - Guide
- Texte argumentatif sur les avantages et les inconvénients du téléphone portable ✓ - Forum Mobile
4 réponses
jordane45
Messages postés
38167
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mai 2024
4 657
22 mars 2021 à 06:57
22 mars 2021 à 06:57
Bonjour,
Déjà, pour rappel, la doc sur les card est disponible ici :
https://getbootstrap.com/docs/4.0/components/card/
Ensuite... tu sembles placer tes éléments html un peu au piff ...
Dis toi qu'il faut mettre les éléments dans la div card-body .... ( le corps de la card
donc
A corriger par
Et pour finir.. qu'appelles tu ... text floatant ?
Que veux tu obtenir exactement ?
Déjà, pour rappel, la doc sur les card est disponible ici :
https://getbootstrap.com/docs/4.0/components/card/
Ensuite... tu sembles placer tes éléments html un peu au piff ...
Dis toi qu'il faut mettre les éléments dans la div card-body .... ( le corps de la card
donc
<div class="card mb-3" style="max-width: 540px;"> <div class="row g-0"> <div class="col-md-8"> <div class="card-body">
A corriger par
<div class="card mb-3" style="max-width: 540px;"> <div class="card-body"> <div class="row g-0"> <div class="col-md-8">
Et pour finir.. qu'appelles tu ... text floatant ?
Que veux tu obtenir exactement ?
flexi2202
Messages postés
3798
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
3 mai 2024
187
Modifié le 22 mars 2021 à 08:31
Modifié le 22 mars 2021 à 08:31
bonjour jordane
merci pour ta réponse
d après la documentation de boostrap a cette page et sauf erreur de ma part https://getbootstrap.com/docs/5.0/components/card/
le code de base de la card est bien
sauf que j ai inverser la
<div class="col-md-4">
avec la
<div class="col-md-8">
pour avoir l image a droite
voici ce que j ai pour l instant
voici ce que je souhaiterais pour les écrans supérieur a 752 px
et pour les écrans en dessous de 752 px
ceci
merci pour ta réponse
d après la documentation de boostrap a cette page et sauf erreur de ma part https://getbootstrap.com/docs/5.0/components/card/
le code de base de la card est bien
sauf que j ai inverser la
<div class="col-md-4">
avec la
<div class="col-md-8">
pour avoir l image a droite
<div class="card mb-3" style="max-width: 540px;"> <div class="row g-0"> <div class="col-md-4"> <img src="..." alt="..."> </div> <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> </div>
voici ce que j ai pour l instant
voici ce que je souhaiterais pour les écrans supérieur a 752 px
et pour les écrans en dessous de 752 px
ceci
jordane45
Messages postés
38167
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mai 2024
4 657
22 mars 2021 à 10:18
22 mars 2021 à 10:18
Ben tu ne pourras pas le faire avec le code que tu as.
Il va falloir mettre ton img dans la div qui contient ton texte .. sinon ça restera deux éléments distincts ...
Il va falloir mettre ton img dans la div qui contient ton texte .. sinon ça restera deux éléments distincts ...
flexi2202
Messages postés
3798
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
3 mai 2024
187
Modifié le 22 mars 2021 à 17:06
Modifié le 22 mars 2021 à 17:06
merci pour la reponse
je me doutais bien ...
je viens d essayer ce morceau de code
cela fonctionne bien pour une image a gauche mais pas si je veux faire la meme chose pour une image mise a droite
je me doutais bien ...
je viens d essayer ce morceau de code
<div class="card mb-3"> <div class="row no-gutters"> <div class="col-md-12"> <div class="col-md-4"> <img src="imn-39-cm.JPG" class="w-100"id="example1"> </div> <div class="card-body"> <h4 class="card-title">Mon choix sur le poste de pêche</h4> <p class="card-text"> fffffffffffffffffffffffffffffffffffffffffsdld,dk,zpdkmc;smf;mfkefkze^flze$fl^ze$flze</p> <p style="clear: left;">--- Clears the left float ---</p> </div> </div> </div> </div>
cela fonctionne bien pour une image a gauche mais pas si je veux faire la meme chose pour une image mise a droite
flexi2202
Messages postés
3798
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
3 mai 2024
187
23 mars 2021 à 09:30
23 mars 2021 à 09:30
bon ben pas le choix j ai fini par abandonner les cards pour ce travail