Tiles

Basis element for wrapping page content. Tiles make use of flexbox and provide a more efficient way to align items.

This is the tile content 
<div class="tile-container">
  <div class="tile">
    <div class="columns">
      <div class="column">
        This is the tile content
      </div>
    </div>
  </div>
</div>

Using headers and footers

This is a tile title

This is a tile subtitle

This is some tile content
This is some tile content
This is the tile footer 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header">
      <div class="tile-titles">
        <h2 class="tile-title">This is a tile title</h2>
        <h2 class="tile-subtitle">This is a tile subtitle</h2>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        This is some tile content
      </div>
      <div class="column">
        This is some tile content
      </div>
    </div>
    <div class="tile-footer">
      This is the tile footer
    </div>
  </div>
</div>

Headers and footers with a distinct separation line.

Add .tile-header-border or .tile-footer-border to separate the header or footer with a border.

By default .column will fill the remaining width. Using multiple .column elements in a single .columns element will divide them equally.

This is a tile title

This is some tile content
This is some tile content
This is the tile footer 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header tile-header-border">
      <div class="tile-titles">
        <h2 class="tile-title">This is a tile title</h2>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        This is some tile content
      </div>
      <div class="column">
        This is some tile content
      </div>
    </div>
    <div class="tile-footer tile-footer-border">
      This is the tile footer
    </div>
  </div>
</div>

Extra elements within the header

Add ml-auto to align the element on the right.

This is a tile title

This is a tile subtitle

Action 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header">
      <div class="tile-titles">
        <h2 class="tile-title">This is a tile title</h2>
        <h2 class="tile-subtitle">This is a tile subtitle</h2>
      </div>
      <a href="#" class="btn btn-primary ml-auto">Action</a>
    </div>
  </div>
</div>

When using more than one extra element, wrap them inside a container and apply .ml-auto to it to properly align them.

This is a tile title

This is a tile subtitle

Action Another action Something else here
Separated link
Action 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header">
      <div class="tile-titles">
        <h2 class="tile-title">This is a tile title</h2>
        <h2 class="tile-subtitle">This is a tile subtitle</h2>
      </div>
      <div class="ml-auto">
        <div class="btn-group">
          <div class="dropdown">
            <a class="btn btn-light dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            More
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
        </div>
        <a href="#" class="btn btn-primary">Action</a>
      </div>
    </div>
  </div>
</div>

Using images

Images will scale up to 100% width of the tile element.

This is an image
This is an image 
<div class="tile-container">
  <div class="row">
    <div class="col-md-6">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=1">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=2">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Using the bootstrap grid

You can align tiles using the bootstrap grid.

This is an image

This is a tile title

This is some tile content
This is the tile footer
This is an image 
<div class="tile-container">
  <div class="row">
    <div class="col-md-4">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=3">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="tile">
        <div class="tile-header tile-header-border">
          <div class="tile-titles">
            <h2 class="tile-title">This is a tile title</h2>
          </div>
        </div>
        <div class="columns">
          <div class="column">
            This is some tile content
          </div>
        </div>
        <div class="tile-footer tile-footer-border">
          This is the tile footer
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=5">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Using tables

Use tables inside a tile element.

This is a tile title

This is a tile subtitle

This is a table header cell
This is a table cell 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header tile-header-border border-bottom-0">
      <div class="tile-titles">
        <h2 class="tile-title">This is a tile title</h2>
        <h2 class="tile-subtitle">This is a tile subtitle</h2>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>This is a table header cell</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>This is a table cell</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Wrapping

Please note:

The flex-wrap CSS property, which is being used by the examples below, is not (yet) supported in IE11.

Use .columns-wrap to force wrapping on the selected .columns. Control how many items should be on one columns with .wrap-*, where * is number of items per columns. The available numbers to combine with the .wrap-* class are: 1, 2, 3, 4, 5, 6 and 8.

Equal height

Use .columns-eq-height on a .columns element to force children to have equal height.

This is a tile title

Dapibus id blandit fames ad nunc lobortis dis proin a cras consequat sem magnis magna torquent a dui dolor adipiscing lacus odio erat magna eu adipiscing morbi.
Adipiscing cum nisl a parturient ultrices senectus condimentum iaculis penatibus suspendisse tincidunt primis a bibendum ultrices magna enim sociosqu quam parturient arcu quisque vestibulum vestibulum dignissim interdum mus.
Proin dignissim metus tristique, lacinia lectus a, malesuada tortor.
A columns without .columns-eq-height.
Proin et porttitor ante.
Morbi condimentum, ligula volutpat sagittis vulputate.
Nam congue, orci quis semper molestie, ligula sem euismod lacus.
Sit amet lacinia lectus mauris non sapien.
Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin.

This is a separator

The same columns with .columns-eq-height.
Proin et porttitor ante.
Morbi condimentum, ligula volutpat sagittis vulputate.
Nam congue, orci quis semper molestie, ligula sem euismod lacus.
Sit amet lacinia lectus mauris non sapien.
Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin. 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header">
      <div class="tile-titles">
        <h2 class="tile-title">This is a tile title</h2>
      </div>
    </div>
    <div class="columns columns-eq-height columns-wrap wrap-3">
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Dapibus id blandit fames ad nunc lobortis dis proin a cras consequat sem magnis magna torquent a dui dolor adipiscing lacus odio erat magna eu adipiscing morbi.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Adipiscing cum nisl a parturient ultrices senectus condimentum iaculis penatibus suspendisse tincidunt primis a bibendum ultrices magna enim sociosqu quam parturient arcu quisque vestibulum vestibulum dignissim interdum mus.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Proin dignissim metus tristique, lacinia lectus a, malesuada tortor.
          </div>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        A columns without <code>.columns-eq-height</code>.
      </div>
    </div>
    <div class="columns columns-wrap wrap-5">
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Proin et porttitor ante.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Morbi condimentum, ligula volutpat sagittis vulputate.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Nam congue, orci quis semper molestie, ligula sem euismod lacus.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Sit amet lacinia lectus mauris non sapien.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin.
          </div>
        </div>
      </div>
    </div>
    <div class="tile-separator tile-separator-border">
      <h2 class="tile-title">This is a separator</h2>
    </div>
    <div class="columns">
      <div class="column">
        The same columns with <code>.columns-eq-height</code>.
      </div>
    </div>
    <div class="columns columns-eq-height">
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Proin et porttitor ante.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Morbi condimentum, ligula volutpat sagittis vulputate.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Nam congue, orci quis semper molestie, ligula sem euismod lacus.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Sit amet lacinia lectus mauris non sapien.
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card card-box m-0">
          <div class="card-body">
            Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Grid for tiles

Percentage based grid system, available width classes: .column-20, .column-25, .column-33, .column-40, .column-50, .column-60, .column-66, .column-75, .column-80.

20%
60%
20%
33%
66%
50%
25% 
<div class="tile-container">
  <div class="tile">
    <div class="columns">
      <div class="column column-20">
        <div class="card card-box m-0">
          <div class="card-body">
            20%
          </div>
        </div>
      </div>
      <div class="column column-60">
        <div class="card card-box m-0">
          <div class="card-body">
            60%
          </div>
        </div>
      </div>
      <div class="column column-20">
        <div class="card card-box m-0">
          <div class="card-body">
            20%
          </div>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column column-33">
        <div class="card card-box m-0">
          <div class="card-body">
            33%
          </div>
        </div>
      </div>
      <div class="column column-66">
        <div class="card card-box m-0">
          <div class="card-body">
            66%
          </div>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column column-50">
        <div class="card card-box m-0">
          <div class="card-body">
            50%
          </div>
        </div>
      </div>
      <div class="column column-25">
        <div class="card card-box m-0">
          <div class="card-body">
            25%
          </div>
        </div>
      </div>
    </div>
  </div>
</div>