[Résolu] Impossible de faire floater mon image a droite

bonjour a tous je suis sous boostrap
et j utilise un jeu de card

j ai un code qui me permet de faire floater mon image a gauche
mais je souhaiterais la faire floater a droite

mais je n y arrives pas ...
j aimerais garder la même structure de fichier ...

voici le code
merci de l aide

 

 <style>
		 
		 #example1 { float: left; }
#example2 { float: right; }
	 </style>
	       <div class="card mb-3">
               <div class="row no-gutters">
			    <div class="col-md-12">
                  <div class="col-md-4"> <img src="" class="w-100" id="example1"> </div>
                  
                     <div class="card-body">
                        <h4 class="card-title">la france</h4>
                        <p class="card-text"> L'histoire de la France commence avec les premières occupations humaines du territoire correspondant au pays actuel. Aux groupes présents depuis le Paléolithique et le Néolithique, sont venues s'ajouter, à l'Âge du bronze et à l'Âge du fer, des vagues successives de Celtes, puis au iiie siècle de peuples germains (Francs, Wisigoths, Alamans, Burgondes) et au ixe siècle de scandinaves appelés Normands.

Le nom de la France est issu d'un peuple germanique, les Francs. Clovis (466-511), roi des Francs saliens, scelle par son baptême à Reims l'alliance de la royauté franque avec l'Église catholique. Il unit les tribus franques salienne et ripuaire et conquiert un ensemble de territoires en Gaule et en Germanie qui sont agrandis par ses descendants mérovingiens, puis par la deuxième dynastie franque des Carolingiens fondée en 751. Charlemagne en particulier conquiert la Basse-Saxe dans le Nord de l'Allemagne, le royaume lombard en Italie et constitue une marche à l'est qui deviendra l'Autriche. L'Empire carolingien est finalement partagé en 843 entre ses petits-fils par le traité de Verdun qui sépare la Francie occidentale de la Francie orientale, qui deviendra le royaume de Germanie. La troisième dynastie franque, celle des Capétiens, s'impose définitivement en Francie occidentale à partir de 987. Philippe Auguste et ses successeurs donnent une nouvelle impulsion à l'unification territoriale du royaume de France et repoussent les frontières orientales du Rhône sur les Alpes et de la Saône sur le Rhin, à partir de l'achat du Dauphiné (1349) jusqu'à l'annexion de l'Alsace (1648-1681).						</p>
						<p style="clear: left;">--- Clears the left float ---</p>
                     </div>
                  </div>
               </div>
            </div>

Modifié par flexi2202 (22 Mar 2021 - 09:01)

Hello,

D'après la coloration syntaxique, tu as une erreur au niveau de la déclaration de l'image.

Tu peux laisser une espace avant l'id dans la partie "w-100"id ?

bonjour merci pour la réponse

je souhaiterais par la même occasion mieux expliquer mon soucis


d après la documentation de boostrap a cette page https://getbootstrap.com/docs/5.0/components/card/

le code de base de la card est

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

sauf que j ai inverser la

<div class="col-md-4">

avec la

<div class="col-md-8">

pour avoir l image a droite

pour l instant j ai ceci



voici ce que je souhaiterais pour les écrans supérieur a 752 px


et pour les écrans en dessous de 752 px
ceci


Modifié par flexi2202 (22 Mar 2021 - 09:09)

flexi2202 a écrit :

voici ce que je souhaiterais pour les écrans supérieur a 752 px

Je ne connais pas Bootstrap donc je ne pourrais pas te donner la solution exacte, mais je peux te donner mes impressions ainsi qu'une piste : ce que tu illustres ne ressemble plus du tout à une "grille" donc selon moi tu ne vas pas parvenir à tes fins en utilisant le système de grille de Bootstrap (col-, row-) qui va forcément compartimenter tes éléments au sein de cellules et les empêcher de flotter.

voila je passe en resolu