~~~ OLD ELEMENTS ~~~

Forms

<div class="form__group">
  <label class="form__label" for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form__control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="form__group">
  <label class="form__label" for="exampleFormControlSelect1">Example select</label>
  <select class="form__control" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<div class="form__group">
  <label class="form__label" for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form__control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<div class="form__check">
  <input type="checkbox" class="form__check-control" id="exampleCheck1">
  <label class="form__check-label" for="exampleCheck1">Check me out</label>
</div>

<div class="form__check">
  <input type="radio" class="form__check-control" id="exampleRadio1">
  <label class="form__check-label" for="exampleRadio1">Default radio</label>
</div>

Form groups

<div class="input-group mb3">
  <input type="text" class="form__control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group__append">
    <button class="button button--outline-gray" type="button">Button</button>
  </div>
</div>

Dropdown

<div class="dropdown">
  <button class="button button--primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu dropdown__menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

Tabs

<div class="tabs">
  
  <ul class="tabs__list nav nav-tabs" role="tablist">
    <li class="nav-item tabs__list-item">
      <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">
        First
      </a>
    </li>
    <li class="tabs__list-item">
      <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
    </li>
    <li class="tabs__list-item">
      <a class="nav-link" id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
    </li>
  </ul>

  <div class="tabs__content">
    <div id="first" class="tab-pane active" role="tabpanel" aria-labelledby="first-tab">
      <h3>First tab content</h3>
    </div>
    <div id="second" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
      <h3>Second tab content</h3>
    </div>
    <div id="third" class="tab-pane" role="tabpanel" aria-labelledby="inqurieis-tab">
      <h3>Third tab content</h3>
    </div>
  </div>

</div>
  

Dropdown tabs

<div class="dropdown">
  <button class="button button--primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select a tab
  </button>
  <div class="dropdown-menu dropdown__menu" aria-labelledby="dropdownMenuButton">
    <ul class="nav nav-tabs nav-tabs--dropdown" role="tablist">
      <li class="dropdown__item">
        <a class=" js-tab-selector nav-link active" aria-selected="true" data-toggle="tab" role="tab" data-target="#first-drop" href="#first-drop">First tab</a>
      </li>
      <li class="dropdown__item">
        <a class=" js-tab-selector nav-link" aria-selected="false" data-toggle="tab" role="tab" data-target="#second-drop" href="#second-drop">Second tab</a>
      </li>
    </ul>
  </div>
</div>
<div class="tabs__content">
  <div id="first-drop" class="tab-pane active" role="tabpanel" aria-labelledby="first-drop">
    <h3>First dropdown tab content</h3>
  </div>
  <div id="second-drop" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
    <h3>Second dropdown tab content</h3>
  </div>
</div> 

Modal

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Add .modal-dialog-transparent to .modal-dialog for a transparent background. This also removes the box shadow on the modal dialog. Shaddow, if needed, will have to be added manualy for element(s) in the transparent dialog.

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

  <button type="button" class="button button--primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">{% include 'icon-close' %}</span>
          </button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus similique reiciendis ipsam modi odio laudantium labore cupiditate.
        </div>
        <div class="modal-footer">
          <button type="button" class="button button--danger button--sm" data-dismiss="modal">Close</button>
          <button type="button" class="button button--primary button--sm">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Media object

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione officiis et cum, nesciunt magnam rerum consectetur rem sunt? Odio eaque sit modi quas debitis, quae sed odit repudiandae sequi nostrum!

<div class="media">
  <img class="mr4" src="https://via.placeholder.com/100" alt="Generic placeholder image">
  <div class="media-body">
    <h3 class="mt0">Media heading</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione officiis et cum, nesciunt magnam rerum consectetur rem sunt? Odio eaque sit modi quas debitis, quae sed odit repudiandae sequi nostrum!
  </div>
</div>

Helper classes

Spacing

 An eight step powers of two scale ranging from 0 to 16rem.

Base:
  p = padding
  m = margin

Modifiers:
  a = all
  h = horizontal
  v = vertical
  t = top
  r = right
  b = bottom
  l = left

  0 = none ($spacing-none)
  1 = 1st step in spacing scale ($spacing-xs - 5px)
  2 = 2nd step in spacing scale ($spacing-sm - 10px)
  3 = 3rd step in spacing scale ($spacing-base - 15px)
  4 = 4th step in spacing scale ($spacing-lg - 30px)
  5 = 5th step in spacing scale ($spacing-xl - 50px)
  6 = 6th step in spacing scale ($spacing-xxl - 100px)
  7 = 7th step in spacing scale ($spacing-xxxl - 150px)

Media Query Extensions:
  --sm: 576px,
  --md: 768px,
  --lg: 992px,
  --xl: 1200px

Example Media Query Extensions usage: .mt2.mt3--md.mt4--lg

Text align

Base
  t = text-align
Modifiers
  l = left
  r = right
  c = center
  j = justify
Media Query Extensions:
  --sm: 576px,
  --md: 768px,
  --lg: 992px,
  --xl: 1200px

Display

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Complete reference