View on GitHub

Flex tables

Use the flex table classes when you need to keep related elements on the same row, but with flexible individual widths.

On this page

Examples

html

<div class="table-flex">
  <div class="flextable-item table-flex-primary">
    <input type="text" class="form-control" placeholder="Search orders">
  </div>
  <div class="table-flex-item">
    <div class="btn-group">
      <button type="button" class="btn btn-outline-primary">Create</button>
      <button type="button" class="btn btn-outline-primary">Export</button>
    </div>
  </div>
</div>

CSS

Sass variables

$table-header-padding-right:                   $spacer * 1.3;
$table-header-font-weight:                     $font-weight-bold;

$table-flex-btn-group-margin-left:             $spacer * .6;

$table-actions-padding-bottom:                 $spacer * .9;