0

I was going through a Bootstrap tutorial when I encountered myself with a problem. It may be silly but I can't work it out. I have an article and a side bar in a row class with 9 and 3 columns each. The background color of the article (blue) finishes just below the text, and I want it to fit the height of the side bar. In the tutorial that doesn't happen but at any point he explains why. So I'd be glad if you could help me.

<section class="main row">
        <article class="color1 col-xs-12 col-sm-8 col-md-9">
            <h3>Article</h3>
            <p>
                Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
            </p>
        </article>
        <aside class="color2 col-xs-12 col-sm-4 col-md-3">
            <h3>Sidebar</h3>
            <p>
                Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
            </p>
        </aside>
    </section>

All that code is inside a container class. My .color1 and .color2 classes define just the background-color.

Attached an image to help figure my idea out. Image with indication

labilbe
  • 3,501
  • 2
  • 29
  • 34
Nacho S
  • 1
  • 2
  • Have you considered setting height for the article? – Frutis May 17 '16 at 03:46
  • @Frutis I did, but the only way I see changes is using px measures, and it gets different proportions when I reduce the browser resolution. – Nacho S May 17 '16 at 03:51
  • @NachoS you're looking for [equal height columns](https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=equal%20height%20columns%20css). – hungerstar May 17 '16 at 03:55
  • @hungerstar Thanks, I've solved it using some kind of 'flex' css properties applied to the row class. – Nacho S May 17 '16 at 04:05
  • @NachoS not sure if your developing for the web or not but make sure `flexbox` provides the proper [browser support](http://caniuse.com/#search=flexbox) you will need. – hungerstar May 17 '16 at 05:18

1 Answers1

0

you can add below style:

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

and add row-eq-height to your section element <section class="main row row-eq-height">

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Charlene Chia-Ling Chou
  • 26
  • 1
  • 6