Developer documentation

UNICEF has defined a visual design specification for our internal web applications. This specification follows our brand guidelines, takes into account accessibility and is rooted in a set of principles that are defined on our UX/UI design guidelines.

Additionally to those specs, UNICEF has created a technology agnostic reference implementation, so it can be used with any modern development framework such as React or Angular. One of the main goals of this implementation is to:

• Speed up the development of our applications by providing developers with a set of CSS classes that comply with usability, branding and accessibility best practices.
• Improve the quality of the interfaces with a well thought and designed framework.

This document is for developers that have to implement the user interface of a UNICEF web application. Here you will find the technical documentation with examples of the HTML and CSS classes.

This implementation is based on bootstrap 4.x, one of the most popular and widely used frameworks on the Internet. For brevity, we assume the reader is familiar with this framework, and has a good understanding of HTML as well as CSS.

If you need to design a user interface for a UNICEF application you will need to understand how and when to use each of the elements described in this document. To get that knowledge, please, read our UX/UI design guidelines.

Example

This is an example of a full page.

Full page example

Getting started

In order to use the UNICEF’s UI in your project you can reference a CDN or download using npm.

With CDN

CDNs can offer a performance benefit by hosting on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of the files from the same CDN, it won’t have to be re-downloaded.

For the CSS:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@unicef/design-system/dist/css/unicef.css">

If you need to include the JavaScript, you have two options. The first one, a minified javascript bundle file that includes all bootstrap JavaScript (bootstrap, popper, jquery). You need this if you require dropdowns, tabs, etc.

<!-- All js bundled -->
<script src="https://cdn.jsdelivr.net/npm/@unicef/design-syste/dist/js/unicef-bundle.min.js"></script>

<!-- only the scripts that were created by UNICEF (no requirement)-->
<script src="https://cdn.jsdelivr.net/npm/@unicef/design-system/dist/js/unicef.min.js"></script>

Using npm

This bootstrap customization is based on SASS, and therefore you can easily override the CSS classes for your particular project.

First, install the npm package

 npm install @unicef/design-system

Import unicef.scss in your global scss file. For example:

/* you may need to change the path to the node_modules dir */
@import "../node_modules/@unicef/design-system/scss/unicef"

We have used bootstrap variables whenever possible. Custom created variables are defined in scss/_variables.scss.

Typography

The default typography is the one defined by user’s operating system. That way we don’t need to download any font.

h1. Heading 1

Lead paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

heading 5

heading 6

  <h1>h1. Heading 1</h1>
  <p class="lead">
  Lead paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim
  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
  </p>

  <p>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat
  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
  id est laborum.
  </p>

  <h2>Heading 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
  </p>

  <h3>Heading 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
  </p>

  <h4>heading 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
  </p>

  <h5>heading 5</h5>

  <h6>heading 6</h6>

Alerts

Alerts use the .alert class followed by the type of alert .alert-success, .alert-warning, .alert-danger.

This is a success alert. Check it out!

This is a warning alert. It is used to warn the user about something he has to be aware of.

This is a danger alert. An error or something that blocks current flow happened!

  <div class="alert alert-success" role="alert">
    This is a success alert. Check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    This is a warning alert. It is used to warn the user about something
    he has to be aware of.
  </div>
  <div class="alert alert-danger" role="alert">
    This is a danger alert. An error or something that blocks current flow happened!
  </div>

Alerts support strong and links.

This alert displays how it looks a warning alert with a strong element and a link.

  <div class="alert alert-warning" role="alert">
    This alert displays how it looks a warning alert with a
    <strong>strong element</strong> and
    <a href="">a link</a>.
  </div>

Buttons

There are 4 types of buttons. The .btn class is common to all of them:

• .btn-primary for the main button.
• .btn-outline-primary, for the default button.
• .btn-outline-danger, for the danger button.
• .btn-link, for the link button.

Primary button

Default button

Danger button

Link button

  <h5>Primary button</h5>
  <p>
    <button class="btn btn-primary">Normal</button>
    <button class="btn btn-primary active">Active</button>
    <button class="btn btn-primary" disabled>Disabled</button>
  </p>
  <h5>Default button</h5>
  <p>
    <button class="btn btn-outline-primary">Normal</button>
    <button class="btn btn-outline-primary active">Active</button>
    <button class="btn btn-outline-primary" disabled>Disabled</button>
  </p>
  <h5>Danger button</h5>
  <p>
    <button class="btn btn-outline-danger">Normal</button>
    <button class="btn btn-outline-danger active">Active</button>
    <button class="btn btn-outline-danger" disabled>Disabled</button>
  </p>

  <h5>Link button</h5>
  <p>
    <button class="btn btn-link active">Link button</button>
    <button class="btn btn-link">Normal</button>
    <button class="btn btn-link" disabled>Link button</button>
  </p>

Also, it is possible to group an input with a button:

  <div class="input-group">
    <input class="form-control py-2" type="search"
      placeholder="Example of input with search button" >
    <span class="input-group-append">
      <button class="btn btn-primary" type="button">
        <i class="fa fa-search"></i> Search
      </button>
    </span>
  </div>

Navigation Bar

<nav class="navbar navbar-expand-md flex-column flex-md-row bd-navbar p-0">
  <a class="navbar-brand navbar-line d-none d-md-block d-lg-block my-2 ml-3"
    href="/" aria-label="Unicef">
    <img class="img-fluid" alt="unicef-logo"
      src="assets/images/unicef-logo.svg">
  </a>
  <a class="navbar-brand" href="/">Application Name</a>
</nav>

<nav class="navbar navbar-expand-md flex-md-row bd-navbar p-0">
  <a class="navbar-brand ml-3" href="/">Application name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
  </button>
  <div class="collapse navbar-collapse"  id="navbarSupportedContent1">
    <ul class="navbar-nav rounded-left flex-row d-md-flex ml-auto p-1 pl-3">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"  
          data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">
          Libya
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Menu Item</a>
          <a class="dropdown-item" href="#">Menu Item 2</a>
        </div>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#"><span class="badge">4</span>Notifications</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="fa fa-inbox" title="Inbox"></i>Item with Icon
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"  
          data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">
          <img class="img-fluid" alt="unicef-logo" title="Profile"
            src="assets/images/avatar.png"></a>
        <div class="dropdown-menu dropdown-menu-right"
          aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Menu Item</a>
          <a class="dropdown-item" href="#">Menu Item 2</a>
        </div>
      </li>		
    </ul>
  </div>
</nav>

• SELECTED
• UNSELECTED
• DISABLED
• DROPDOWN
  Menu Item- Long Title Menu Item 2 Menu Item 3
• DISABLED DROPDOWN
  Menu Item- Long Title Menu Item 2 Menu Item 3

<nav class="navbar navbar-expand-md flex-md-row bd-navbar p-0">
  <a class="navbar-brand ml-3" href="/">Application name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
      <i class="fas fa-bars"></i>
    </span>
  </button>
  <div class="collapse navbar-collapse"  id="navbarSupportedContent2">
    <ul class="navbar-nav rounded-left flex-row d-md-flex ml-auto p-1">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"  
          data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">
          Libya
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Menu Item</a>
          <a class="dropdown-item" href="#">Menu Item 2</a>
        </div>
      </li>			
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="badge ">4</span>Notifications
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="fa fa-inbox" title="Inbox"></i>Item With Icons
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"  
          data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">
          <img class="img-fluid" alt="unicef-logo" title="Profile"
            src="assets/images/avatar.png"></a>
        <div class="dropdown-menu dropdown-menu-right"
          aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Menu Item</a>
          <a class="dropdown-item" href="#">Menu Item 2</a>
        </div>
      </li>			
    </ul>
  </div>
</nav>
<ul class="nav nav-tabs p-0 bg-white">
  <li class="nav-item">
    <a class="nav-link active" href="#">SELECTED</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">UNSELECTED</a>
  </li>
  <li class="nav-item disabled">
    <a class="nav-link disabled" href="#">DISABLED</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"
      data-toggle="dropdown" href="#" role="button"
      aria-haspopup="true" aria-expanded="false">DROPDOWN
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Menu Item- Long Title</a>
      <a class="dropdown-item" href="#">Menu Item 2</a>
      <a class="dropdown-item" href="#">Menu Item 3</a>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link disabled dropdown-toggle" id="navbarDropdownMenuLink"  
      data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">DISABLED DROPDOWN
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Menu Item- Long Title</a>
      <a class="dropdown-item" href="#">Menu Item 2</a>
      <a class="dropdown-item" href="#">Menu Item 3</a>
    </div>
  </li>
</ul>

Accessibility

To support skip navigation, always add the .skip navigation before the navigation bar pointing to the element in which the content starts.

Adding this helps users that browse the web with keyboards, allowing them to skip all the links in your main menu.

<a class="skip" href="#contents" tabindex="0">Skip Navigation</a>
<!-- navbar  goes here--->
<nav class="navbar navbar-expand-md flex-md-row bd-navbar">
  ....
</nav>

<!-- your contents start here -->
<div id="contents">
</div>

Tabs

• Tab 1
• Tab 2
• Disabled
• Menu
  Menu Item - Long Title Menu Item 2 Menu Item 3
• Menu disabled
  Menu Item- Long Title Menu Item 2 Menu Item 3

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

<div class = "container-fluid">
  <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    <li class="nav-item">
     <a class="nav-link active" id="tab-1-tab" data-toggle="tab" href="#tab-1"
      role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-2-tab" data-toggle="tab" href="#tab-2"
      role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</a>
    </li>
    <li class="nav-item disabled">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"
        data-toggle="dropdown" href="#" role="button"
        aria-haspopup="true" aria-expanded="false">Menu</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Menu Item - Long Title</a>
        <a class="dropdown-item" href="#">Menu Item 2</a>
        <a class="dropdown-item" href="#">Menu Item 3</a>
      </div>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link disabled dropdown-toggle" id="navbarDropdownMenuLink"
        data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">Menu disabled
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Menu Item- Long Title</a>
        <a class="dropdown-item" href="#">Menu Item 2</a>
        <a class="dropdown-item" href="#">Menu Item 3</a>
      </div>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active show" id="tab-1" role="tabpanel"
    aria-labelledby="tab-1-tab">
    Consequat occaecat ullamco amet non eiusmod nostrud dolore
    irure incididunt est duis anim sunt officia.
    Fugiat velit proident aliquip nisi incididunt nostrud exercitation
    proident est nisi.

    Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit
    cupidatat in veniam ad.
    Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa
    excepteur quis.
    Occaecat sit eu exercitation irure Lorem incididunt nostrud.
  </div>
  <div class="tab-pane fade" id="tab-2" role="tabpanel"
    aria-labelledby="tab-2-tab">
    Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit
    commodo mollit ex.
    Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do.

    Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt.
    Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation
    duis deserunt.
    Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco
    ea tempor duis.
  </div>
  </div>
</div>

Images

Images should weight the least amount possible.

1. Use the format that weights for the size and quality you require. Typically, it is recommended to use JPG format for pictures and SVG for graphics and icons.

2. Use size optimizers such as svgo or jpeg optim.

3. It is necessary to set the alt description on all images. Keep this description brief, describe what you see and do not interpret the contents of the image. For decorative images, use an empty string alt attribute (alt="").

Forms

Form fields have different status:

Input with placeholder

Input with value

Input disabled

Input readonly

  <form>
   <!-- on inputs/selects/textareas use the class .form-control -->
    <div class="form-group col-md-6">
      <label for="input-placeholder">Input with placeholder</label>
      <input type="text" class="form-control" id="input-placeholder"
        placeholder="Placeholder">
    </div>
    <div class="form-group col-md-6">
      <label for="input-value">Input with value</label>
      <input type="text" class="form-control" id="input-value"
        placeholder="Placeholder"
        value="Value">
    </div>
    <!-- mark with the attribute disabled, disabled fields -->
    <div class="form-group col-md-6">
      <label for="input-disabled">Input disabled</label>
      <input type="text" class="form-control" id="input-disabled"
        placeholder="Placeholder"
        value="Value of the disabled field"
        disabled>
    </div>
    <!-- mark with the attribute readonly, fields that
    are read only -->
    <div class="form-group col-md-6">
      <label for="input-readonly">Input readonly</label>
      <input type="text" class="form-control" id="input-readonly"
        placeholder="Placeholder"
        value="Value of the readonly field"
        readonly>
    </div>
  </form>

Form elements can include short texts that provide important information to users.

Your email We'll never share your email with anyone else.

Corporate email Domains like hotmail.com or gmail.com are not allowed.

  <form>
    <div class="form-group">
      <label for="input-placeholder-help">Your email</label>
      <input type="email" class="form-control" id="input-placeholder-help"
        aria-describedby="emailHelp" placeholder="Example: john.doe@unicef.org">
      <small id="emailHelp" class="form-text text-muted">
        We'll never share your email with anyone else.
      </small>
    </div>
    <div class="form-group">
      <label for="input-placeholder-help-up">Corporate email</label>
      <small id="emailHelp-up" class="form-text text-muted">
        Domains like hotmail.com or gmail.com are not allowed.
      </small>
      <input type="email" class="form-control" id="input-placeholder-help-up"
        aria-describedby="emailHelp-up" placeholder="Example: john.doe@unicef.org">
    </div>
  </form>

Textareas

To add a counter at the bottom of a field add the attributes data-counter="true" and maxlength="100", where 100 is the max number of characters. Add data-autoresize="true" to allow auto resize.

Regular textarea

Textarea with counter

Textarea with autoresize

  <form class="row">
    <div class="form-group col-4">
      <label for="textarea-regular">Regular textarea</label>
      <textarea rows="3" id="textarea-regular"
        class="form-control"
        placeholder="This is the placeholder">
      </textarea>
    </div>
    <div class="form-group col-4">
      <label for="textarea-counter">Textarea with counter</label>
      <textarea id="textarea-counter"
        rows="3"
        class="form-control"
        placeholder="Counter should decrease while typing"
        data-counter="true"
        maxlength="100"></textarea>
      </div>
    <div class="form-group col-4">
      <label for="textarea-autoresize">Textarea with autoresize</label>
      <textarea rows="3" id="textarea-autoresize"
        class="form-control"
        placeholder="The number of lines shall grow with text."
        data-autoresize="true"></textarea>
    </div>
  </form>

These two enhancements require Javascript.

Required fields

Required fields are those that are mandatory to fill in order to submit a form. For required fields we mark <label> contents with an <em> and the form field (input, select, textarea,…) with the attribute required.

Input with placeholder

Input with value

Textarea required

Select required

Select Value 1 Value 2

  <form>
    <div class="row">
      <div class="form-group col-md-6">
        <label for="input-placeholder-required"><em>Input with placeholder</em></label>
        <input type="text" class="form-control" id="input-placeholder-required"
            placeholder="This is the placeholder" required>
      </div>
      <div class="form-group col-md-6">
        <label for="input-value-required"><em>Input with value</em></label>
        <input type="email" class="form-control" id="input-value-required"
          placeholder="This is the placeholder"
          value="This is the value" required>
      </div>
      <div class="form-group col-md-6">
        <label for="textarea-required"><em>Textarea required</em></label>
       <textarea rows="3" class="form-control"
          placeholder="Required textarea" required></textarea>
      </div>
      <div class="form-group col-md-6">
        <label for="select-required"><em>Select required</em></label>
        <div class="select-wrapper">
        <select id="select-required" rows="3" class="form-control" required>
        <option value="">Select</option>
        <option value="value1">Value 1</option>
        <option value="value 1">Value 2</option>
        </select>
        </div>
      </div>
    </div>
  </form>

Errors in forms

UNICEF’s reference implementation uses Bootstrap conventions to display errors in forms as base. We slightly customized the look and feel and we only use the .is-invalid class to provide visual feedback.

Example the HTML and classes to display errors (no actual validation is performed)

Input with error

Only numbers and letters are allowed.

Select with error

Select Option 1 Option 2 Option 3

Error message.

Textarea with error

Error message.

200 characters left

  <form class="row">
    <div class="form-group col-md-4">
      <label for="input-with-error">Input with error</label>
      <input type="email" class="form-control is-invalid" id="input-with-error"
        placeholder="Placeholder"
        value="&##$%^ ABCD">
        <div class="invalid-feedback">
          Only numbers and letters are allowed.
        </div>
    </div>
    <div class="form-group col-md-4">
      <label for="select-with-error">Select with error</label>
      <div class="select-wrapper">
        <select class="form-control is-invalid" >
          <option value="">Select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
      </div>
        <div class="invalid-feedback">
          Error message.
        </div>
    </div>
    <div class="form-group col-md-4">
      <label for="input-with-error">Textarea with error</label>
      <textarea rows="3" class="form-control is-invalid" maxlength="200"
      placeholder="Placeholder text"></textarea>
        <div class="invalid-feedback">
          Error message.
        </div>
        <small class="input-with-error-counter">200 characters left</small>
    </div>
 </form>

Cards

Use .card-deck to have same all cards of a row with the sam length.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <h5 class="card-header">Card title</h5>
    <div class="card-body">
      <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content.
        This content is a little bit longer.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <h5 class="card-header">Card title</h5>
    <div class="card-body">
      <p class="card-text">This card has supporting text below
        as a natural lead-in to additional content.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <h5 class="card-header">Card title</h5>
    <div class="card-body">
      <p class="card-text">This is a wider card with supporting text below
        as a natural lead-in to additional content. This card has even longer
        content than the first to show that equal height action.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

Card with actions menu

This card has action menu

Actions

Edit Share

Remove card

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<div class="card-deck">
  <div class="card">
    <div class="card-header d-flex">
      <h5>This card has action menu</h5>
      <div class="ml-auto">
        <a class="dropdown-toggle" id="cardDropdown"  
          data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">
          Actions
        </a>
        <div class="dropdown-menu" aria-labelledby="cardDropdown">
          <a class="dropdown-item" href>Edit</a>
          <a class="dropdown-item" href>Share</a>
           <div class="dropdown-divider"></div>
          <a class="dropdown-item" href>Remove card</a>
        </div>
      </div>
    </div>
    <div class="card-body">
      <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content.
        This content is a little bit longer.
      </p>
    </div>
  </div>
</div>

Cards with navigation tabs

• Home
• Profile
• Disabled

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi elit justo, finibus consequat facilisis eget, dictum in justo.

List groups

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

List group with a button:

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Add an element

  Add an element to the list

Tables

Main Element	Date	Amount(USD)
Text is a link	29-May-2018	$23.33
This is another link. Vertically align cells to the middle	12-Aug-2017	$99.44
Text is left-aligned	29-May-2018	$1,223.00

<table class="table">
  <thead>
    <tr>
      <th>Main Element</th>
      <th>Date</th>
      <th>Amount(USD)</th>
    </tr>
  </thead>
  <tbody >
    <tr>
      <td>
        <a href="#">Text is a link</a>
      </td>
      <td>29-May-2018</td>
      <td>$23.33</td>
    </tr>
    <tr>
      <td>
        <a href="#">This is another link. Vertically align cells to the middle</a>
      </td>
      <td>12-Aug-2017</td>
      <td class>$99.44</td>
    </tr>
    <tr>
      <td>
        <a href="#">Text is left-aligned</a>
      </td>
      <td>29-May-2018</td>
      <td>$1,223.00</td>
    </tr>
  </tbody>
</table>

Loading status

Everytime a asynchronous request is done in the client side, the app should display that status. We use .spinner-border or .spinner-border.spinner-border-sm (small one).

For accessibility, notice you need to include role=status

Loading...

Loading...

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

To specify the action that is being performed:

Loading...

<div class="d-flex align-items-center">
  <div class="spinner-border" role="status" aria-hidden="true"></div>
  <strong class='ml-2'>Loading...</strong>
</div>

When the action is performed within a button

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" 
    role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-outline-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" 
    role="status" aria-hidden="true"></span>
  Loading...
</button>

More info in bootstrap spinners documentation.

Progress Bar

Indicates the status of completeness of a process.

There are different background colors available (.bg-success, .bg-warning, etc..)

Please, notice the accessibility attributes role, aria-valuenow, aria-valuemin and aria-valuemax.

Empty

0% 100%

Without numbers

Filled

Allocated funds: $87,500 (75%)

$0.00 $125,000.00

  <h6>Empty</h6>
  <div class="progress">
    <div class="progress-bar bg-success" style="width: 0%"
      role="progressbar" aria-valuenow="0" 
      aria-valuemin="0" aria-valuemax="100">
    </div>
  </div>
  <div class="d-flex justify-content-between">
    <span class="progress-min-max">0%</span>
    <span class="progress-min-max">100%</span>
  </div>

   <h6>Without numbers</h6>
  <div class="progress mb-3">
    <div class="progress-bar bg-success" style="width: 50%"
      role="progressbar" aria-valuenow="75" 
      aria-valuemin="0" aria-valuemax="100">
    </div>
  </div>
  
  <h6>Filled</h6>
  <p>Allocated funds: $87,500 (75%)</p>
  <div class="progress" title="87500, (75%)">
    <div class="progress-bar bg-success" style="width: 75%"
      role="progressbar" aria-valuenow="87500.00" 
      aria-valuemin="0.00" aria-valuemax="125000.00">
    </div>
  </div>
  <div class="d-flex justify-content-between">
    <span class="progress-min-max">$0.00</span>
    <span class="progress-min-max">$125,000.00</span>
  </div>

For more information see bootstrap docs