Bootstrap 4 - split column into 2 rows of 50% height of parent div

Question

Hope you're doing well! I'm having trouble achieving something with bootstrap 4. I want to make something like this image below.

click here to see example Which means: a row with columns, the right column splits into two rows. Those two rows (or blocks) can't go beyond the parent height (the height of the image).

The most accurate code I made so far:

 <div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-lg-6">
            <img class="img-fluid" src="img/nathan-dumlao-298337-unsplash.jpg" alt="logo-meltino">
        </div>
        <div class="col-lg-6">
            <div class="row bg-dark align-items-center justify-content-center h-50 p-5">
                <div class="col">
                    <p>Trabalhamos diariamente com café verde e torrado, o que permite explorar todas as suas potencialidades. O nosso empenho continuo no aperfeiçoamento deve-se à consciência de que o café é uma fonte inesgotável de conhecimento para todos aqueles que se envolvem com este produto. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. </p>
                </div>
            </div>
            <div class="row align-items-center justify-content-center h-50 p-5">
                <div class="col">
                    <h1>Já bebeu o seu café hoje?</h1>
                </div>
            </div>
        </div>
    </div>
</div>

I've already tried nested columns, read lots of posts and articles, tried tricks and tips from stackoverflow and css-tricks, like something called "mini-box" and "big-box". I can't actually recall all the codes I've tried as I didn't thought I would get to the point of asking around here.

I'm asking as I've tried a lot of things and didn't find a solution. I believe it has something to do about the fact I'm a newbie with bootstrap (I'm transitioning), but I enjoy learning while making!

Also, I would really appreciate an explanation, because I feel this is a misunderstanding about the way I should split the second half of the main row.

Thank you in advance!

Answer 1

See follow the code down following Bootstrap documentation and few costumizations

body, html, main {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        background: black;
    }
    .h-100v {
        height: 100vh;
    }
    .h-50v {
        height: 50vh;
    }
    section.row {
        margin: 0px;
        padding: 0px;
    }
    figure {
        margin: 0px !important;
        padding: 0px !important;            
        overflow: hidden;
    }
    figure img {
        width: 100%;
    }

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
    <main class="container">
    <section class="row h-100v">
        <figure class="col-xs-12 col-sm-12 col-md-6">
            <img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1600d7c3643474cad51afa03d891722c&w=1000&q=80" alt="Image Example" class="">
        </figure>
        <div class="col-xs-12 col-sm-12 col-md-6 bg-light">
            <div class="row">
                <div class="col-12 h-50v d-flex align-items-center bg-dark text-white">
                    <div class="col text-center">
                        <h1>This is title</h1>
                        <p>This area content 1.</p>
                    </div>
                </div>
                <div class="col-12 h-50v d-flex align-items-center bg-light">
                    <div class="col text-center">
                        <h1>This is title</h1>
                        <p>This area content 2.</p>
                    </div>
                </div>
            </div>
        </div>

    </section>
  </main>

https://codepen.io/pauloserafimtavares/pen/OwqMzQ

Answer 2

Check this

CSS

   .container > .row{ border:1px solid red;min-height:30%; }
   .container > .row > .col-md-6 > .row{ border:1px solid red;min-height:50%; }

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
           <p>Side bar</p>
        </div>
        <div class="col-md-6">
           <div class="row">
                <p>Upper half</p>
           </div>
           <div class="row">
                <p>Lower half</p>
           </div>
        </div>
    </div>
</div>

Answer 3

Code below should work, but keep in mind that layout is not available on smaller screens as columns need to be stacked.

#img {
  height: 500px;
  background-color: red;
}

@media (max-width: 767px) {
  .adjust-height {
    height: auto;
  }
}

@media (min-width: 768px) {
  .adjust-height {
    height: 50%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-12 col-md-6">
            <div id="img">
                <!-- Replaces image -->
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="row h-100">
                <div class="col-12 adjust-height bg-primary">
                    <p>Trabalhamos diariamente com café verde e torrado, o que permite explorar todas as suas potencialidades. O nosso empenho continuo no aperfeiçoamento deve-se à consciência de que o café é uma fonte inesgotável de conhecimento para todos aqueles que se envolvem com este produto. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. </p>
                </div>
                <div class="col-12 adjust-height bg-secondary">
                    <p>DIV2</p>
                </div>
            </div>
        </div>
    </div>
</div>

---

---