[BootStrap] Media object

Version imprimable

11/03/2021, 09h22
Guy-greg44

[BootStrap] Media object

Bonjour, je dois utiliser un média object pour avoir une image alignée a gauche, et un titre suivie de texte dans un média body aligné à droite de l'image.
Mon problème est le suivant, l'image se positionne systématiquement au dessus du titre et donc du texte. J'ai essayé plusieurs solutions proposées par différents sites, aucune ne fonctionne et je ne comprends vraiment pas pourquoi. Merci de votre aide !
11/03/2021, 10h36
mathieu

montrez nous les codes HTML et CSS que vous avez essayés.

J'ai essayé ces codes la :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="media">
        <img class="mr-3" src="img/fleur1.jpg">
	<div class="media-body">
		<h3 class="mt-03 mb-1">titre</h3>
		texte
	</div>
</div>
 
<div class="media">
	<div class="media-left">
		<img class="mr-3" src="img/fleur1.jpg">
	</div>
	<div class="media-body">
		<h3 class="mt-03 mb-1">titre</h3>
		texte
	</div>
</div>
 
<div class="media">
	<img class="align-self-start mr-3" src="img/fleur1.jpg">
	<div class="media-body">
		<h3 class="mt-03 mb-1">titre</h3>
		texte
	</div>
</div>

Et j'ai aussi essayé de mettre trois media object dans un <ul> car mon but premier était d'en avoir trois à la suite.

Bonjour,
quelle version de BootStrap utilises-tu ?

Dans la ver.4.5 l'exemple montre que tu ne structures pas correctement ton composant
Code:

1 2 3 4 5 6 7 8 <div class="media"> <img src="..." class="align-self-start mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Top-aligned media</h5> <p>Cras sit amet nibh libero, in ....</p> <p>Donec sed odio dui. Nullam ...</p> </div> </div>
Un de tes essais est pourtant visiblement correct ?!?

Voir : Media object : Top-aligned media

11/03/2021, 16h33
Guy-greg44

J'étais en version 5.0.0 qui a supprimé les media object, d'où le fait que je ne trouvait pas l'erreur, je suis repassé en 4.6 et tout fonctionne, merci a vous