JSFiddle - React, Tailwind, and code Playground

flex boxes with bootstrap 3

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">


    <div class=" frow">

      <div class="col-xs-12 col-md-4 progress-bar-warning  text-danger">
        LEFT
      </div>
      <div class="col-xs-12 col-md-4 progress-bar-danger  vertical-align">
        MID
        <img src="http://placehold.it/300/656678/ffffff/&text=andrew" class="img-responsive">
      </div>
      <div class="col-xs-12 col-md-4 text-alert progress-bar-info drew">
        RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp; RIGHT &nbsp;
      </div>

    </div>

    <div class="frow progress-bar-success">
      <div class="col-xs-12">
        sdfsdfsdfsdf
      </div>
    </div>


  </div>
</div>
<hr>

<div class="container elem progress-bar-success">

  <section class="progress-bar-info initial">
    <span class="label">&lt;div class="initial"&gt;</span>
    <p>
      I will be 200px when there is room, and I will shrink down to 100px if there is not room, but no smaller.
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <section class="progress-bar-danger none">
    <span class="label">&lt;div class="none"&gt;</span>
    <p>
      I will always be 200px, no matter what.
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <section class="progress-bar-warning flex1">
    <span class="label">&lt;div class="flex1"&gt;</span>
    <p>
      I will fill up 1/3 of the remaining width.
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <section class="progress-bar-default flex2">
    <span class="label">&lt;div class="flex2"&gt;</span>
    <p>
      I will fill up 2/3 of the remaining width.
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
 ...

CSS

.frow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.frow > [class*='col-'] {
  display: flex;
  flex-direction: column;
  -webkit-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.drew {
  -webkit-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: rgba(244, 243, 222, 0.9);
    width: 200px;
  min-width: 100px;
}

.vertical-align {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.container {
  display: -webkit-flex;
  display: flex;
}

.initial {
  -webkit-flex: initial;
  flex: initial;
  width: 200px;
  min-width: 100px;
}

.none {
  -webkit-flex: none;
  flex: none;
  width: 200px;
}

.flex1 {
  -webkit-flex: 1;
  flex: 1;
}

.flex2 {
  -webkit-flex: 2;
  flex: 2;
}