CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4multiple-columns
manifestor
manifestor

Reputation: 1442

Make element inside of columns stay at the bottom

I have the following 2 bootstrap columns (each of them has a product description and a price information):

<div class="row">
    <div class="col-md-4">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <ul>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
            </ul>
            <table class="table table-sm table-bordered price-table">
                <tbody>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr class="table-success">
                        <td>info</td>
                        <td>info</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    Lorem.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <ul>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
            </ul>
            <table class="table table-sm table-bordered price-table">
                <tbody>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr class="table-success">
                        <td>info</td>
                        <td>info</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    Lorem.
                </p>
            </div>
        </div>
    </div>
</div>

As we can see the ul elements have a different elements count and hence have a different height, which is very annoying. What I want to achieve is:

How can I do this? Thank you very much in advance.

Upvotes: 1

Views: 821

Answers (3)

Steven Kuipers
Steven Kuipers

Reputation: 847

You can add the mb-auto class to the ul. This will push all content below it to the bottom. For this to work you do need the parent container to be a flex container. You have an extra div inside the columns. add d-flex flex-column classes to this div. Alternatively, you can remove the redundant div and add the classes to the column div.

<div class="row">
    <div class="col-md-4">
        <div class="d-flex flex-column h-100">
           ...
        <ul class="mb-auto">

I made a codepen with the demo

edit: When styling the inner div, it needs h-100 to get full height so all columns stay the same height.

Upvotes: 2

yunzen
yunzen

Reputation: 33439

.row .col-md-4 {
  display: flex;
}
.row .col-md-4 > div {
  display: flex;
  flex-direction: column;
}
.row .col-md-4 > div > table {
  margin-top: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-4">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <ul>
        <li>
          text
        </li>
        <li>
          text
        </li>
      </ul>
      <table class="table table-sm table-bordered price-table">
        <tbody>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr class="table-success">
            <td>info</td>
            <td>info</td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          Lorem.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <ul>
        <li>
          text
        </li>
        <li>
          text
        </li>
        <li>
          text
        </li>
        <li>
          text
        </li>
      </ul>
      <table class="table table-sm table-bordered price-table">
        <tbody>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr class="table-success">
            <td>info</td>
            <td>info</td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          Lorem.
        </p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Erdem
Erdem

Reputation: 32

easy solution is adding a height to your ul.

ul {
height: 100vh;
}

But you should also add rows into your both col-4s.

Upvotes: -2

Related Questions