Twitter Bootstrap : Same Height For Grid

With Bootstrap 4, I want to same height for my sections. But I want to enlarge only content

(Not the header and the footer) Can you help me?

Solution 1:

section {
  background: #ccc;
  border: 1px solid #000;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-content: space-between;
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}

.content {
  flex: 1 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
</div>

Solution 2:

Something like this?

.content {
  min-height: 150px;
  height: 150px;
}

section {
  background: #ccc;
  border: 1px solid #000
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}

.content {
  min-height: 150px;
  height: 150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
</div>

Share