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: 10 auto;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"rel="stylesheet" /><divclass="row"><divclass="col-3"><section><header>
        Title
      </header><divclass="content"><ul><li>
            Item 1
          </li></ul></div><footer>
        Footer
      </footer></section></div><divclass="col-3"><section><header>
        Title
      </header><divclass="content"><ul><li>
            Item 1
          </li><li>
            Item 2
          </li></ul></div><footer>
        Footer
      </footer></section></div><divclass="col-3"><section><header>
        Title
      </header><divclass="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;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"rel="stylesheet"/><divclass="row"><divclass="col-3"><section><header>
        Title
      </header><divclass="content"><ul><li>
            Item 1
          </li></ul></div><footer>
        Footer
      </footer></section></div><divclass="col-3"><section><header>
        Title
      </header><divclass="content"><ul><li>
            Item 1
          </li><li>
            Item 2
          </li></ul></div><footer>
        Footer
      </footer></section></div><divclass="col-3"><section><header>
        Title
      </header><divclass="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