Bootstrap equal height columns

Question

I'm trying to achieve equal height of two columns. The content IRL is dynamic. Layout (desktop) normal columns (33% width each), on mobile stack cols. I tried wrapping with .row and using 'd-flex' but nothing works.

Here's a codepen:

https://codepen.io/olefrankjensen/pen/RxXEBN

Please help as I don't understand Flexbox yet.

.ContractTemplateDetails {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 2rem !important;
  height: 100%;
}

.ContractTemplateDetails:hover {
  background-color: #e5e5e5;
}

.ContractTemplateDetails.checked {
  padding: 2rem;
  background-color: #ccc;
  -webkit-box-shadow: 0.25rem 0.25rem 0 0 #999;
  -moz-box-shadow: 0.25rem 0.25rem 0 0 #999;
  box-shadow: 0.25rem 0.25rem 0 0 #999;
}

.ContractTemplateDetails .contract-image img {
  width: 100%;
}

.ContractTemplateDetails .contract-image .image-placeholder {
  max-width: 25%;
}

.ContractTemplateDetails .contract-price h2 {
  font-family: Times serif;
}

.ContractTemplateDetails .contract-list {
  list-style: none;
}

.ContractTemplateDetails .contract-list li {
  text-align: left;
  color: #666;
  font-size: 0.8rem;
}

.ContractTemplateDetails .contract-list li:not(:first-child) {
  margin-top: 1rem;
}

.SamCheckbox {
  min-height: 34px !important;
}

.SamCheckbox.custom-checkbox .custom-control-input {
  display: none;
}

.SamCheckbox.custom-checkbox .custom-control-input~.custom-control-indicator {
  background: none;
  border: 1px solid #666;
  color: blue;
  font-size: 1.6rem;
  width: 36px;
  height: 36px;
}

.SamCheckbox.custom-checkbox .custom-control-input~.custom-control-indicator::before {
  position: absolute;
  top: 5px;
  left: 5px;
}

.SamCheckbox.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
  border: 1px solid #666;
  background: none;
}

.SamCheckbox.custom-checkbox .custom-control-input:disabled~.custom-control-indicator {
  border: none;
  background: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div class="row d-flex component-margin-top-small justify-content-center">
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-inline-flex flex-column align-items-center justify-content-center unselectable mr-sm-2" data-template-id="18">
      <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
      <h4 class="contract-title mt-md">Contract Basic</h4>
      <ul class="contract-list mb-md">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li>
      </ul>
      <div class="contract-price mt-auto">
        <h2 class="component-margin-top-small">205,00 kr./md.</h2>
      </div>
      <div class="SamCheckbox custom-control custom-checkbox mt-sm"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
    </section>
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-inline-flex flex-column align-items-center justify-content-center unselectable mt-3 checked" data-template-id="19">
      <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="OmniCar Premium"></div>
      <h4 class="contract-title mt-md">Contract Premium</h4>
      <ul class="contract-list mb-md">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non mellem serviceeftersyn.</li>
        <li>Reparationer som er nødvendige for, at bilen fungerer drift Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non skulle ske at virke. Det kan jeg næsten ikke tro! mv. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
          non </li>
      </ul>
      <div class="contract-price mt-auto">
        <h2 class="component-margin-top-small">540,00 kr./md.</h2>
      </div>
      <div class="SamCheckbox custom-control custom-checkbox mt-sm"><input type="checkbox" class="custom-control-input" id="sam-check-5" value="19"><i class="fa fa-check custom-control-indicator"></i></div>
    </section>
  </div>

</div>

pavger · Accepted Answer · 2018-01-26 23:22:08Z

3

Just remove height: 100%; from the left column .ContractTemplateDetails

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
}

answered Jan 26, 2018 at 23:22

pavger

6832 gold badges12 silver badges22 bronze badges

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

Comments

Michael Benjamin · Accepted Answer · 2018-01-29 21:12:53Z

2

Two initial settings on a flex container are flex-direction: row and align-items: stretch.

This means that children of a flex container will automatically share equal height.

However, this only works if the height on the children is set to auto. If you define a height on a child, that overrides align-items, disabling the equal heights feature.

So, to make your columns have equal height, remove the specified height on flex items:

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
    /* height: 100%; <--- remove this */
}

revised codepen

edited Jan 29, 2018 at 21:12

answered Jan 26, 2018 at 23:29

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

2 Comments

olefrank Over a year ago

Thanks. Do you also know why the columns exceeds the container margin in small viewport width (aka phone)? I fixed it with setting flex container to inline (.d-inline-flex) but that didn't work when I also made it a "row" (.row) to have equal heights. Now the columns don't have any margin to the sides... Why is that?

Michael Benjamin Over a year ago

@olefrank, I don't see the problem. In small viewport size (phone) I'm getting no overflow. Maybe post a new demo where I can see the problem.

Collectives™ on Stack Overflow

Bootstrap equal height columns

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related