Mise en page de grille Bootstrap

[VlNCENT]

Bonjour à toutes et tous,

J'aimerais créer une grille avec trois colonnes venant d'un fichier Bootstrap (V:5.0). J'y arrive avec deux mais je coince pour la troisième :

<div class="container"><div class="row">
     	<div class="col-lg-3 order-2 order-md-1">Bla bla bla</div>
	<div class="col-lg-9 order-1 order-md-2">Bli bli bli</div></div></div>

Actuellement :

Ors j'aimerais placer en-dessous de la colonne (lg-9) une autre colonne de même largeur (lg-9) et en même temps à coté de celle de lg3. 

J'aimerais aussi que sur des écrans petits (GSM) que celle-ci ce place en troisième position (order-md-3).

J'ai tester plusieurs solutions mais je n'y arrive pas.

Bien à vous

Vincent

 

[Dylav]

Bonjour Vincent,
Pour avoir une idée plus précise de ce que tu tentes de faire, il serait judicieux que tu nous dévoiles également la feuille de style attachée à ton projet.

[VlNCENT]

Bonjour Dylav,

Je ne pense pas qu'il faut le css, c'est basé sur un système, je suppose, flex box connu. Cependant dans le doute voici le lien https://bootstrapmade.com/demo/Arsha/ du Template gratuit avec lequel lequel je tente de placer c'est trois colonne dans la page "inner-page".

Désoler pour ne pas mieux expliquer de manière précise ma demande, en même temps si quelqu'un connais Bootstrap je crois qu'il comprendra.

bien à toi et belle journée Dylav.

Vincent 

[Dylav]

Salut Vincent,

C'est par le biais de la feuille de style que l'on compose la mise en page. C'est donc bien là que tu dois exprimer tes spécifications.

En d'autres termes, c'est par le biais des classes container, row, col-lg-3, order-2, order-md-1, col-lg-9, order-1, order-md-2, etc., que tu vas positionner et présenter tes différentes boîtes (blocs <div>) et leur contenu.

[Dylav]

Si tu ne maîtrises pas l'accès à la feuille de style, je te suggère de contourner la difficulté en englobant tes 2ème et 3ème blocs (n°4 et 5 du schéma ci-dessous) dans un bloc (à créer, n°3 du schéma) identique au 1er bloc (n°2 du schéma).

Ce qui donnerait le code HTML ci-dessous.

<div class="container">
  <div class="row">
    <div class="col-lg-3 order-2 order-md-1">Bla blo blu</div>
    <div class="col-lg-3 order-2 order-md-1">
      <div class="col-lg-9 order-1 order-md-2">Bli bli bli</div>
      <div class="col-lg-9 order-1 order-md-2">Bla bla bla</div>
    </div>
  </div>
</div>

Et je pense que les blocs se présenteraient automatiquement comme tu le souhaites sur les petits écrans (type smartphone). À tester…

Tu noteras qu'ici les caractéristiques de présentation (classes) des blocs n°2 et 3 sont identiques. De même, celles des blocs n°4 et 5 le sont également. Mais, si tu as les moyens d'influer sur la feuille de style, rien ne t'empêche de les différencier.

Bloc 1 = classe  row
Blocs 2 et 3 = classes  col-lg-3  order-2  order-md-1
Blocs 4 et 5 = classes  col-lg-9  order-1  order-md-2

[VlNCENT]

Merci Dylav,

En effet sa fonctionne pour les grand écran et en même temps pour les petits cela ne vas pas. Le bloc Bla bla bla ce place entre les deux autres bloc et il devrait être tout en bas. Il existe en effet des solutions en faisant flotter un bloc, cependant je n'aime pas trop cette perspective... Je pense qu'il y à moyen d'éviter cela, je continue à chercher.

Si tu as d'autre suggestion n'hésite pas et un tout grand merci pour ton aide. 

Bien à toi Dylav.

 

 

[Dylav]

Il y a 9 heures, VlNCENT a dit :

Le bloc Bla bla bla se place entre les deux autres blocs et il devrait être tout en bas.

Tu veux dire que les blocs 2, 4 et 5 de mon schéma apparaissent dans l'ordre vertical 2 - 5 - 4 ? Surprenant !

[VlNCENT]

Salut Dylav,

Sry pour la réponse tardive. Oui et non je me suis mal exprimé.

Sur grand écran l'ordre est bon CAD : 2 - 4 -5.

Sur petit écran l'ordre devrait être 4- 2 - 5 et avec ton code, l'ordre est toujours de 2 - 4 -5

Actuellement le seul moyen "propre" pour contourner ce problème est de créer un bloc supplémentaire cacher sur grand écran et de le faire apparaitre sur petit écran, celui-ci contenant le même texte du bloc 2 (bla blo blu). Il faut aussi caché le bloc 2 sur petit écran.

Le code donne ceci :

  <div class="container">
  <div class="row">
    <div class="col-lg-3 order-lg-1 order-md-2 d-none d-lg-block">Bla blo blu</div><!-- texte visible uniquement sur grand ecran-->
    <div class="col-lg-9 order-lg-2 order-md-1">
      <div class="col-lg-9 order-1 order-md-2"> Bli bli bli</div>
      <div class="col-lg-9 d-lg-none">Bla blo blu</div> <!-- texte caché (copie du block 2) sur grand écran mais qui apparait sur les écrant plus petit-->
      <div class="col-lg-9 order-1 order-md-2">le Bla bla bla</div>
    </div>
  </div>
</div>

Ca fonctionne et en même temps il doit y avoir moyen de faire plus propre sans devoir doubler le texte du block 2...

Tout est expliqué ici : https://getbootstrap.com/docs/5.0/getting-started/introduction/ dans l'onglet LAYOUT > GRID ou Columns mais je ne trouve pas...

Merci Dylav de ton aide, bien qu'il y à cette solution je laisse le topic comme non résolu pour l'instant qui sait peut-être qu'il y à une solution plus "propre".

Bien à toi

Vincent