Page 1 sur 2
comment faire floter du texte dans une card de boostrap
Posté : 21 mars 2021, 21:17
par flexi2202
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>
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 01:50
par two3d
flotter comment ?
Ton image n'a pas d'extension: image/phil
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 07:34
par flexi2202
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
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 11:52
par two3d
image capture stp ? montre en dessinant ce que tu veux faire
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 17:33
par flexi2202
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
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 19:26
par two3d
image en float right
image en display block
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 19:37
par flexi2202
merci pour la reponse
donc je dois ajouter juste cet attribut a la balise image
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 19:47
par two3d
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.
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 21:11
par flexi2202
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
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 21:20
par two3d
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)
Re: comment faire floter du texte dans une card de boostrap
Posté : 22 mars 2021, 21:26
par flexi2202
ok
je regarde a cela
merci
je reviens quand tout sera nickel
Re: comment faire floter du texte dans une card de boostrap
Posté : 23 mars 2021, 00:46
par flexi2202
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;
}
}
Re: comment faire floter du texte dans une card de boostrap
Posté : 23 mars 2021, 10:34
par flexi2202
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>
Re: [RESOLU] comment faire floter du texte dans une card de boostrap
Posté : 23 mars 2021, 11:48
par two3d
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
Re: [RESOLU] comment faire floter du texte dans une card de boostrap
Posté : 23 mars 2021, 11:52
par flexi2202
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>
