Twitter Bootstrap Question posted in

Bootstrap equal height columns-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

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

    .ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search