Layout

Boxes

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element. Buttons next to each other is spaced out with the adjacent selector .btn + .btn.

Box header

Box with border and bg

Box header

Box with border and bg

Box header

Box with border and bg

Box header

Box with border and bg

<div class="row">
    <div class="col-12 box border-with-bg">
        <h4 class="box-header">Box header</h4>
        <p>Box with border and bg</p>
    </div>
</div>

<div class="row">
    <div class="col-12 box border-with-bg">
        <h4 class="box-header light">Box header</h4>
        <p>Box with border and bg</p>
    </div>
</div>

<div class="row">
    <div class="col-12 box border-with-bg">
        <h4 class="box-header muted">Box header</h4>
        <p>Box with border and bg</p>
    </div>
</div>

<div class="row">
    <div class="col-12 box border-with-bg">
        <h4 class="box-header error">Box header</h4>
        <p>Box with border and bg</p>
    </div>
</div>

Grid

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element. Buttons next to each other is spaced out with the adjacent selector .btn + .btn.

Col 12
Col 6
Col 6
Col 4
Col 4
Col 4
Col 3
Col 3
Col 3
Col 3
<div class="row">
  <div class="col-12 styleguide-col">Col 12</div>
</div>

<div class="row">
  <div class="col-6 styleguide-col">Col 6</div>
  <div class="col-6 styleguide-col">Col 6</div>
</div>

<div class="row">
  <div class="col-4 styleguide-col">Col 4</div>
  <div class="col-4 styleguide-col">Col 4</div>
  <div class="col-4 styleguide-col">Col 4</div>
</div>

<div class="row">
  <div class="col-3 styleguide-col">Col 3</div>
  <div class="col-3 styleguide-col">Col 3</div>
  <div class="col-3 styleguide-col">Col 3</div>
  <div class="col-3 styleguide-col">Col 3</div>
</div>