[Résolu] Aligner des colonnes avec leur contenu variable

Bonjour,

J'intègre un site avec la grille de base Bootstrap et je souhaiterai pouvoir faire en sorte que mes colonnes s'alignent en hauteur en fonction de leur contenu, mais aussi de largeur d'écran :


En gros un truc flexible qui s'adapte à tout, car là j'utilise une classe que je règle en fonction des tailles d'écran, mais c'est super galère.
Je pense qu'il est possible d'utiliser flexbox, mais je ne trouve pas comment faire ...

Voici le code HTML du bloc en question :

    <div class="ud-questions-bloc mt-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="ud-bg-white">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="images/visuels/surmesure_illu.svg" alt="Une formation sur mesure" class="ud-img-fluid" />
                            </div>
                            <div class="col-md-8">
                                <h3>Découvrir nos
                                    formations</h3>
                                <p>Nous vous proposons un ensemble de formations professionnelles dans le domaine du Web. Celles-ci s’adressent à tous publics et niveaux.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mt-4 mt-lg-0">
                    <div class="ud-bg-white">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="images/visuels/FAQ_illu.svg" alt="Des questions" class="ud-img-fluid" />
                            </div>
                            <div class="col-md-8">
                                <h3>Des questions&nbsp;?</h3>
                                <p>Nous mettons à votre disposition une FAQ. Si jamais vous n’y trouviez pas les réponses à vos questions, n’hésitez pas à nous contacter directement.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Et le CSS :

.ud-questions-bloc {
    margin: 0 0 100px 0;

    .ud-bg-white {
        padding: 40px 25px 30px;
        background: $white;
        box-shadow: 0px 15px 38px rgba(0, 0, 0, 0.1);
        @include border-radius (10px);

        h3 {
            font-weight: 700;
            font-size: 25px;
            line-height: 34px;
            color: $black;
            text-align: left;
            margin: 0;
        }

        p {
            font-weight: 400;
            font-size: 14px;
            line-height: 26px;
            color: $grey1;
            margin: 10px 0 0 0;
        }
    }
}

Quelqu'un pourrait-il me dire si c'est possible et comment ?
Merci par avance !!

Bonjour,

si ton projet est déjà bien avancé avec Bootstrap, continue. Sinon en flexbox seul, tu devras enlever les commandes qui concernent Bootstrap, c'est à dire isoler tes containers, tes blocks, images et textes et repartir sur un gabarit nouveau. Une fois maîtrisé, flexbox est bien plus simple à comprendre. À toi de voir, c'est juste une proposition.
Voici une ébauche sur l'image que tu as proposée. C'est vraiment pas travaillée et minimal, avec une capture d'écran (je n'arrive pas à m'inscrire sur CodePen). C'est juste un exemple sur lequel tu peux repartir. Il y a beaucoup à ajuster, à toi de faire le reste, mettre des padding, margin, des justifications, espacer différemment les items flex, etc. Et bien sûr, les @media sont à ajouter pour les mobiles, là, c'est brut.

<div class="container">
                <div class="bandeau1">
                                           <h3 class="titre">Découvrir nos formations</h3>
                                            <p><img src="Ton_image.jpg" width="50" height="40" alt="" class="wrap align-left"/>Nous vous proposons un ensemble de formations professionnelles dans le domaine du Web. Celles-ci s’adressent à tous publics et niveaux.</p>
   		</div>
                 <div class="bandeau2">
                                                <h3 class="titre">Des questions ?</h3>
                                                <p><img src="Ton-image.jpg" width="50" height="40" alt="" class="wrap align-left"/>Nous mettons à votre disposition une FAQ. Si jamais vous n’y trouviez pas les réponses à vos questions, n’hésitez pas à nous contacter directement.Nous mettons à votre disposition une FAQ. Si jamais vous n’y trouviez pas les réponses à vos questions, n’hésitez pas à nous contacter directement.</p>
  </div></div>

 html {
	max-width:100vh;
	margin:auto 0;
 	font-size: 16px;
  	}
 img.wrap {max-width: 50%;  margin: 10px 0;}  
img.align-left {float: left;  margin-right: 16px;}
 .container {
	display: flex;
	flex-wrap: wrap;
	width:100vw;
  	align-items: center;
  	justify-content: space-between;}
 .bandeau1 {
	width:20%;
	/* et tout ce qui va ici */}
.bandeau2 {
	width:20%;
	/* et tout ce qui va ici */}
.titre {
	 position:absolute;
	 /* et tout ce qui va ici */}
p {		
         position:relative;
         /* et tout ce qui va ici */}

Ton image se positionnera à côté du texte, à gauche, mais il y a d'autres méthodes que float pour le faire.
Sinon une recherche avec flexbox te donnera tout ce que tu veux. Par exemple : https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Après, on utilise : https://flexbox.malven.co/

Vraiment merci beaucoup !! Ca marche impec !!

gcyrillus a écrit :
Bonjour,

tu affiche le fond blanc (.ud-bg-white) à partir d'un boite qui n'est pas un enfant direct de .row (cette class inclut un display:flex) mais de col-lg-6. Cette boite ne vas donc pas s'étirer sur la hauteur de col-lg-6.

Tu peut ajouter à cette boite la class d-flex(= display:flex) pour bénéficier de ce comportement .

modif à faire :

<div class="ud-questions-bloc mt-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 d-flex">
        <div class="ud-bg-white">...</div>
       </div>
      <div class="col-lg-6  d-flex">
        <div class="ud-bg-white">...</div>
       </div>
    </div>
  </div>
</div>

voici un pense-bête à propos de flex utilisé par bootstrap https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html

Il y aussi surement des pense-bête pour bootstrap ,mais je n'en ai pas sous la souris pour le moment , à part celui-ci en anglais https://hackerthemes.com/bootstrap-cheatsheet/

si quelqu'un en a un à partager

Cdt