CODEWITHSUNDEEP
bootstrap-4
Bisvan
Bisvan

Reputation: 127

Bootstrap 2 same height col between 2 big col

I don't find solution for a special case on bootstrap :

SpecialGridBoostrap

I have 1 row with 3 col. On the first row a responsive picture, on the center 1 col with 2 different text bloc (white and blue), on the right 1 col with text.

I would like to have the same height for those 3 col and in the center 2 col with the same height (50% of the picture size).

Do you have an idea ?

Here my code :

<section id="puissance-1">
<div class="container-fluid">
<div class="row">
  <div class="col img-background"></div>
  <div class="col-3" style="padding-left:0;padding-right:0;">
      <div class="col-lg-12 bg-blanc color-gris-fonce p-5">
        <p>La  gamme  innovante  de  produits  Aquademy  réinterprète  l’utilisation          de l'eau, de la lumière et des arômes.  Le  système  de  douche  incorporé  dans  des     matériaux  précieux  devient  art,  où  l’acier  AISI  316L  est  choisi  pour  réaliser  les  plaques esthétiques, insérées même dans les environnements les plus hostiles. Buses    en silicone de première qualité, jets nébulisés fermés par cascades d’eau.</p>
      </div>
      <div class="col-lg-12 bg-bleu color-blanc p-5">
        <p>L’expérience devient encore plus engageante dans la collection    chromothérapie, caractérisée par des projecteurs à led sertis comme des pierres précieuses sur les plaques. Au-delà de l’esthétique raffinée, les projecteurs à leds offrent la meilleure expérience de tonalité et de fréquence de lumière. </p>
      </div>
  </div>
  <div class="col bg-bleu color-blanc  p-5">
    <h2>LA PUISSANCE DE L'EAU</h2>
    <p>La sélection variée des jets permet à l’eau de raconter à notre corps ses    infinies possibilités.  Élément thérapeutique par excellence, l’eau qui se forme dans ces jets répand des sensations   toujours nouvelles, capables de réveiller nos aspirations les plus profondes.
Leurs combinaisons deviennent le mariage parfait pour un bénéfice immédiat sur notre corps.
L’eau équilibre nos énergies les plus cachées, pour donner des moments de dynamisme, de   pure joie et de paix.<BR><BR>

JET PLUIE <BR>
Plein  et  réconfort, il séduit le corps en créant une sensation familière et     délicate.<BR><BR>
JET CASCADE <BR>
Un effet massant et anti stress pour un parfait équilibre entre bien-être et énergie.     <BR><BR>
JET NÉBULISÉ <BR>
Enveloppant et rafraîchissant, l’eau se transforme en particules vaporisées devenant     un tout.<BR><BR>
JET ATOMISÉ<BR>
Dynamique et polyvalent, ce jet joue avec l’union de l’eau et de l’air. Outre     détendre les muscles,  il stimule la créativité aussi et la vigueur du corps.</p>
  </div>
</div>

Upvotes: 0

Views: 17

Answers (1)

Bisvan
Bisvan

Reputation: 127

I found the solution. I added .row and .h-50 in the center col :

<div class="col-3">
 <div class="row h-50">
  <div class="col-lg-12 bg-blanc color-gris-fonce p-5">
    <p>La  gamme  innovante  de  produits  Aquademy  réinterprète  l’utilisation          de l'eau, de la lumière et des arômes.  Le  système  de  douche  incorporé  dans  des     matériaux  précieux  devient  art,  où  l’acier  AISI  316L  est  choisi  pour  réaliser  les  plaques esthétiques, insérées même dans les environnements les plus hostiles. Buses    en silicone de première qualité, jets nébulisés fermés par cascades d’eau.</p>
  </div>
</div>
<div class="row h-50">
  <div class="col-lg-12 bg-bleu color-blanc p-5">
    <p>L’expérience devient encore plus engageante dans la collection    chromothérapie, caractérisée par des projecteurs à led sertis comme des pierres précieuses sur les plaques. Au-delà de l’esthétique raffinée, les projecteurs à leds offrent la meilleure expérience de tonalité et de fréquence de lumière. </p>
  </div>
 </div>
</div>

Upvotes: 1

Related Questions