How can i make a fixed button position in columns when the texts lengths are different?

Question

I have two columns, but the texts inside arent similar length. Therefore the buttons are not in line. I use Bootstrap 4. I tried:

fixing the height, in mobile view too, but the text was overrun the white background.
Bootstrap CSS button fixed position after text
with https://v4-alpha.getbootstrap.com/utilities/flexbox/
Responsive equal height columns in rows with CSS3/HTML5 Only
https://css-tricks.com/fluid-width-equal-height-columns/

This is how it looks like:

This is my code:

.boxes {
  background-color: #fff;
  padding: 20px;
  margin: 40px 0 40px 0;
}

.boxes ul {
  list-style: none;
}

.boxes ul li {
  padding: 8px 0 8px 0;
  text-align: left;
}

.boxes h1 {
  text-transform: uppercase;
}

.space {
  letter-spacing: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<section class="section section--relative parallax-background" style="background-image: url(images/hhhh.jpg);">
  <div class="container">
    <div class="row ">
      <div class="col-sm-6">
        <div class="boxes">
          <h1 class=" text-center text-shadow">Lorem Ipsum</h1>
          <ul class="space default-text ">
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është rintimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum printimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum shtypshkronjave.s</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një printimit dhe shtypshkronjave.)</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Loremkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ëspshkronjave.a</li>
          </ul>
          <button type="button" class="btn btn-danger btn-lg btn-block">ipsum 4545455</button>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="boxes ">
          <h1 class=" text-center text-shadow">Lorem Lorem</h1>

          <ul class="space default-text secondbox">
            <li> <i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon i ind së printimit dhe shtypshkronjave.a</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekstë së printimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i industrisë së printimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ësnjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon rintimit dhe shtypshkronjave.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekste.</li>
            <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i inprintimit dhe shtypshkronjave.</li>

          </ul>
          <button type="button" class="btn btn-danger btn-lg btn-block">lorem 500000</button>
        </div>
      </div>
    </div>
  </div>


</section>

score 0 · Accepted Answer · answered Nov 06 '17 at 17:28

Since you're using Bootstrap 4, you can solve this with flexbox classes.

First, add align-items-stretch (align-items:stretch;) to the row. Then combine col-xm-6 and boxes into a single element and add d-flex flex-column justify-content-sm-between classes to the same element (display:flex; flex-flow:column; justify-content:between;). Finally, add mt-auto (margin-top:auto;) to the button elements to maximize the space above it and force it to the bottom of the column.

.boxes {
  background-color: #fff;
  padding: 20px;
  margin: 40px 0 40px 0;
}

.boxes ul {
  list-style: none;
}

.boxes ul li {
  padding: 8px 0 8px 0;
  text-align: left;
}

.boxes h1 {
  text-transform: uppercase;
}

.space {
  letter-spacing: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="section section--relative parallax-background" style="background-image: url(images/hhhh.jpg);">
  <div class="container">
    <div class="row align-items-stretch">
      <div class="col-sm-6 boxes d-flex flex-column justify-content-sm-between">
        <h1 class=" text-center text-shadow">Lorem Ipsum</h1>
        <ul class="space default-text ">
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është rintimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum printimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum shtypshkronjave.s</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një printimit dhe shtypshkronjave.)</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Loremkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ëspshkronjave.a</li>
        </ul>
        <button type="button" class="btn btn-danger btn-lg btn-block mt-auto">ipsum 4545455</button>
      </div>
      <div class="col-sm-6 boxes d-flex flex-column justify-content-sm-between">
        <h1 class=" text-center text-shadow">Lorem Lorem</h1>

        <ul class="space default-text secondbox">
          <li> <i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon i ind së printimit dhe shtypshkronjave.a</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekstë së printimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i industrisë së printimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum ësnjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i>Lorem Ipsum është një tekst shabllon rintimit dhe shtypshkronjave.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekste.</li>
          <li><i class="fa fa-check-square-o" aria-hidden="true"></i> Lorem Ipsum është një tekst shabllon i inprintimit dhe shtypshkronjave.</li>

        </ul>
        <button type="button" class="btn btn-danger btn-lg btn-block mt-auto">lorem 500000</button>
      </div>
    </div>
  </div>


</section>

How can i make a fixed button position in columns when the texts lengths are different?

1 Answers1