3

How can I make two columns having the same height in Bootstrap grid columns?

.item-text { padding: 30px !important; /* Flex center. */ display: flex; align-items: center; vertical-align: middle; justify-content: center; border: 1px solid blue !important; } .item-text .item-center { align-self: center; margin: auto; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-xl-4 col-lg-6 col-sm-12"> <div class="col-sm-6"> <img src="http://placehold.it/400x600" class="img-responsive" alt="" /> </div> <div class="col-sm-6 item-text"> <div class="item-center"> <h3 class="heading item-heading">(Title) Ways of Something</h3> <p class="item-contributor">John Berger</p> <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p> </div> </div> </div>

Result:

enter image description here

Any ideas how to make the right column's height equal as the left one?

Improve this question
3
  • 1
    Have you tried: getbootstrap.com.vn/examples/equal-height-columns ? - Nice font by the way Commented Sep 30, 2016 at 7:28
  • @ThomasYates yes tried that but doesnt work... Commented Sep 30, 2016 at 7:45
  • 1
    You need to actually add the CSS to your code. It's not in the original Bootstrap. I posted an answer. Commented Sep 30, 2016 at 7:57

2 Answers 2

Reset to default
3

Add the following code to your CSS:

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

Then use that class on the row you want the column to have an equal height:

<div class="row row-eq-height"> <div class="col-lg-6"></div> <div class="col-lg-6"></div> </div>

That's it. This is the cleanest and more official way of doing it.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

using this solution gives extra space in both the child divs. Any idea how to remove this?
@AalindSharma could you provide a Snippet or a screenshot? I do not know what you mean.
This style would interfere with smaller resolutions, meaning the cols will not go one of eachother in mobile resolution.
@media (min-width: 768px) { .row-eq-height { display: flex; flex-wrap: wrap; } }
1

Try this:

Check Demo HERE

HTML:

<div class="row row-height"> <div class="col-sm-6"> <img src="http://placehold.it/400x600" class="img-responsive" alt="" /> </div> <div class="col-sm-6 item-text"> <div class="item-center"> <h3 class="heading item-heading">(Title) Ways of Something</h3> <p class="item-contributor">John Berger</p> <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p> </div> </div> </div>

CSS:

.row-height { display: flex; } .item-text { padding: 30px !important; /* Flex center. */ display: flex; align-items: center; vertical-align: middle; justify-content: center; border: 1px solid blue !important; } .item-text .item-center { /* align-self: center; margin: auto; */ }
Improve this answer

1 Comment

some extra space is coming in the image div, in this solution. Is it possible to remove that space ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.