45

In the doc and in the issues of Bootstrap v4 (here), I can't see any plan on supporting flex-grow, something with a syntax like this for example: 

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

Here a sample of the layout I'd like to create:

image

The export button is always on the right, and the navigation button takes all the space left and therefore looks clean.

Is it possible to build such a layout already? Maybe it is not advised? Of course, there are workarounds using CSS, but I am looking for a clean solution, ideally using Bootstrap class names only to guarantee consistency.

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Eric Burel
  • 3,790
  • 2
  • 35
  • 56

3 Answers3

48

use .col for a simple flex-grow: 1;. It's described here https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • This works well, and should be the accepted answer. It will also work with `row>col` instead of `d-flex>col` http://www.codeply.com/go/rcJBwXRjSN – Carol Skelly Feb 09 '17 at 18:25
  • 4
    Does it works with vertical layout ? For example when the top menu should always appear, and the content should take all the vertical space left ? – Eric Burel Feb 10 '17 at 08:39
  • @EricBurel use breakpoint grid classes on the non `.col` column, and put everything in `.row` and `.container`. It's all referenced in the link I provided. Updated my answer. – Michael Coker Feb 10 '17 at 17:52
  • This solution isn't atomic enough. It adds much more than just `flex-grow`, padding for starters. I'd say it makes more sense to find a utility library in the spirit of Bootstrap that does supply such an atomic utility class. – adi518 Aug 19 '18 at 17:56
45

For anyone comming here from a google search (like me).

Since Bootstrap v 4.1 there are flex-grow and flex-shrink utilities, as the documentation says you can use them like this:

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

Here is a little example

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
</div>
2

I created a class for this, I checked the Bootstrap docs and found nothing about it.

.flex-2 { flex-grow: 2 }

col-auto takes the remaining space but if you have more than one row, so space won't be distributed equally. That's why flex-grow does the trick.

Klooven
  • 3,858
  • 1
  • 23
  • 41
LTroya
  • 530
  • 8
  • 23