Bootstrap - 2 columns of matching height, 1 with full width image, 1 with text

Question

I'm having a difficulty getting something to work in Bootstrap 3.3.7. Fiddle is here: https://jsfiddle.net/rrqt9e98/

<div class="container">
  <div class="row">

    <div class="col-md-6" style="background-color: red;">
      <img src="http://placehold.it/500x333">
    </div>

    <div class="col-md-6" style="background-color: yellow;">
      <p>
      Content column
      </p>
    </div>
  </div>
</div>

Output is currently like this:

What I'm trying to do is get my image (which has an original size of 500*333px) to occupy the full width of the left hand column. I've set width: 100% in my CSS on the img to achieve this, following advice given here: How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

I'm not sure why the red background colour behind the image appears, as I want the image flush with the col-md-6 edges. So I tried adding:

img {
  padding: 0;
  border: 0;
}

I also would like the right hand yellow column to match the height of the image. I am using the jQuery Match height plugin in my project, so could opt for that, unless there is a CSS solution.

The overall effect I would like is a 2 column layout where the image takes up the full left hand column, and that the right hand column matches the height of the left hand column. At a mobile breakpoint (sm or lower) I would like to horizontally stack these 2 columns.

I want it to look like this (which I've mocked up in Fireworks just to show how it should look):

Please can someone point me in the right direction with this?

Columns in Bootstrap have gutters, in the form of left and right padding, which is why you see the red background: https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L1615 - you can test this by removing the padding, like so: https://jsfiddle.net/rrqt9e98/2/ — Tieson T., Sep 01 '17 at 09:21
Unless you want to upgrade to Bootstrap 4, the simplest solution is to move your background color to the row: https://jsfiddle.net/rrqt9e98/3/ — Tieson T., Sep 01 '17 at 09:30
@TiesonT. I can't upgrade to Bootstrap 4 due to the rest of the project working in Bootstrap 3. The link looks good though so if you want to post that as a solution I'll accept your answer. — Andy, Sep 01 '17 at 09:32

score 2 · Accepted Answer · answered Sep 01 '17 at 09:41

Columns in Bootstrap have gutters, in the form of left and right padding, which is why you see the red background: https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L1615 - you can test this by removing the padding, like so: https://jsfiddle.net/rrqt9e98/2

Rather than trying to get the right column to stretch to fill the same height as the left column, just apply your color to the row instead:

<div class="container">
  <div class="row" style="background-color: yellow;">

    <div class="col-md-6 no-gutter" style="background-color: red;">
      <img src="http://placehold.it/500x333">
    </div>

    <div class="col-md-6 no-gutter">
      <p class="p1">
      Content column
      </p>
    </div>
  </div>
</div>

with the relevant CSS:

.no-gutter
{
  padding-left: 0;
  padding-right: 0;
}

.p1
{
  padding: 1em;
}

Fiddle, with some padding added to the paragraph in the right column: https://jsfiddle.net/rrqt9e98/5/

Atlas · Answer 2 · 2017-09-01T09:32:31.063

0

HTML :

    <div class="container-fluid">
     <div class="row">

      <div class="col-md-6 nopadding" style="background-color: red; width:500px">
        <img src="http://placehold.it/500x333">
      </div>

      <div class="col-md-6 nopadding" style="background-color: yellow; height:333px">
        <p>
        Content column
        </p>
      </div>
    </div>
   </div>

CSS:

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

edited Sep 01 '17 at 09:32

answered Sep 01 '17 at 09:16

Atlas

241
3
19

Even with `.container-fluid` it's still not right, the red background remains. I've updated the fiddle https://jsfiddle.net/rrqt9e98/1/. Also, I don't want that content to take up the full width of the view port, I need it contained within `.container` to centre align it in the viewport. I don't want to have this inside `.container-fluid`. – Andy Sep 01 '17 at 09:18
So what you need is the red area should not be visible, right? – Atlas Sep 01 '17 at 09:22
Yes, the red area should not be visible because the image should occupy the full width of the left hand `.col-md-6`. – Andy Sep 01 '17 at 09:23
I've added a screenshot of how I'd like it to look – Andy Sep 01 '17 at 09:28
I updated my reply, it might not be the best way to do it but at least its like on your SS – Atlas Sep 01 '17 at 09:32

Bootstrap - 2 columns of matching height, 1 with full width image, 1 with text

2 Answers2