Bootstrap - setting Column heights

Question

I'm creating a Bootstrap (version 3.3) website, which has a smallish sized carousel, and I want to create 3 boxes immediately on its right-hand side; (refer image for an idea of what I'm trying to do).

As obviously I want it all responsive, I've placed the Carousel within a column (of width 8 for medium & large screens) + 1 for offset, while the boxes would be the width of 2 + 1 offset. I then also created another row (and columns) within the 2 column - so that all boxes would move below the Carousel on a xs screen size at the same time.

I've used row-eq-height to make the Carousel column and the column with the boxes the same height, but I'm not sure as to how to make 2 boxes 33% of the height of the Carousel & 1 box 34% of the Carousel height. (Obviously, I want the boxes displayed below each other, with no gutter between them).

My Code so far on Bootply; https://www.bootply.com/RQfetegi0e

Otherwise the HTML Code so far;

<div class="container" style="padding-top:100px;">
  <div class="row no-gutter">
    <div class="col-md-offset-1 col-md-8 col-sm-8 col-xs-12 row-eq-height">
      <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
          <li data-target="#myCarousel" data-slide-to="4"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner img-responsive center-block">
          <div class="active item">
            <img src="images/carousel/coming-events.jpg" alt="">
          </div>
          <div class="item img-responsive center-block">
            <img src="images/carousel/play-group.jpg" alt="">
          </div>
          <div class="item img-responsive center-block">
            <img src="images/carousel/learn-skills.jpg" alt="">
          </div>
          <div class="item img-responsive center-block">
            <img src="images/carousel/kids-xmas.jpg" alt="">
          </div>
          <div class="item img-responsive center-block">
            <img src="images/carousel/backyard-sports.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-12 no-padding">
      <div class="row">
        <div class="col-xs-12" style="margin-bottom:-20px; margin-top:-20px; height:33%;">
          <h3 style="text-align:center; color: white; background-color:red; height:33%;">Text Here</h3>
        </div>
        <div class="col-xs-12" style="margin-top:-25px; margin-bottom-25px; height:34%;">
          <h3 style="text-align:center; color: white; background-color:green; height:34%;">Text Here</h3>

        </div>
        <div class="col-xs-12" style="margin-top:-25px; margin-bottom:-25px; height:33%;">
          <h3 style="text-align:center; color: white; background-color:blue; height:33%;">Text Here</h3>
        </div>
      </div>
  </div>
  </div>
</div>

CSS Code:

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

Answer 1

It can be easy using jQuery. But height of side sections will be immediately changed when all the images of the slider get loaded.

$(document).ready(function() {
	$('img').load(function() {
	var equalHeight = $('.slider').height();
	var thirdHeight = equalHeight / 3;
	$('.three-equals').each(function() {
		$(this).height(thirdHeight);
	});
});
});

.three-equals h3 {margin: 0px; padding: 0px;}
.three-equals {background-color: yellow;}
.three-equals:nth-child(2) {background-color: red;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-8 slider">
  <div class="row">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://i1.wp.com/youmeandtrends.com/wp-content/uploads/2015/11/abstract-beautiful-flower-images.jpg" alt="Image 1">
      </div>

      <div class="item">
        <img src="http://www.lanlinglaurel.com/data/out/76/4584119-high-resolution-images.jpeg" alt="Image 2">
      </div>

      <div class="item">
        <img src="http://newflowerwallpaper.in/download/friendship-flowers-images-and-wallpapers/friendship-flowers-images-and-wallpapers-1.jpg" alt="Image 3">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a> 

  </div>
  </div>
</div>
<div class="col-xs-4">
  <div class="row">
    <div class="three-equals">
    <h3>Heading 1</h3>
    </div>
    <div class="three-equals">
      <h3>Heading 2</h3>
    </div>
    <div class="three-equals">
      <h3>Heading 3</h3>
    </div>
  </div>
</div>

If you don't want the effect immediately in height you can use spinner(loader) on the screen until the images get loaded.

Answer 2

The way I'm handling heights is with inherit and then add some paddings.

h3 {
    height: inherit;
    padding: 3% 0;
}

<div class="col-xs-12">
          <h3 style="text-align:center; color: white; background-color:red;">Text Here</h3>
        </div>
        <div class="col-xs-12">
          <h3 style="text-align:center; color: white; background-color:green;">Text Here</h3>

        </div>
        <div class="col-xs-12">
          <h3 style="text-align:center; color: white; background-color:blue;">Text Here</h3>
        </div>

Answer 3

Fastest solution - if your carousel will have fixed height, is to set the same height to second (right) row... And also set the background-color attribute to div, not h3, and remove the padding..

<div class="row" style="height:261px">
        <div class="col-xs-12" style="height:33%;background-color:red;">
          <h3 style="text-align:center; color: white; height:33%;">Text Here</h3>
        </div>
        <div class="col-xs-12" style="height:34%;background-color:green;">
          <h3 style="text-align:center; color: white; height:34%;">Text Here</h3>

        </div>
        <div class="col-xs-12" style="height:33%;background-color:blue;">
          <h3 style="text-align:center; color: white; height:33%;">Text Here</h3>
        </div>
      </div>