Colors

Light Blue

#129ad6
$bs-lightblue

Dark Blue

#1f3263
$bs-darkblue

Dark Gray

#4d4d59
$bs-darkgray

Green

#3db559
$bs-green

Yellow

#f7c332
$bs-yellow

Red

#e74c3c
$bs-red

Headings

#292c33
$headings-color

Gray Dark

#57668b
$gray-dark

Gray Light

#8f98b2
$gray-light

Gray Lighter

#c7ccd8
$gray-lighter

Gray Lightest

#dde0e8
$gray-lightest

Smiles

  • bookingsync
  • bigboss
  • boss
  • laughing
  • lemonface
  • sadface
  • tongue
  • winkface
  • winktongue
<ul class="list-unstyled">
  <li><i class="bs-icon-bookingsync"></i> bookingsync</li>
  <li><i class="bs-icon-bigboss"></i> bigboss</li>
  <li><i class="bs-icon-boss"></i> boss</li>
  <li><i class="bs-icon-laughing"></i> laughing</li>
  <li><i class="bs-icon-lemonface"></i> lemonface</li>
  <li><i class="bs-icon-sadface"></i> sadface</li>
  <li><i class="bs-icon-tongue"></i> tongue</li>
  <li><i class="bs-icon-winkface"></i> winkface</li>
  <li><i class="bs-icon-winktongue"></i> winktongue</li>
</ul>

Fixed width smiles

  •   bookingsync
  •   bigboss
  •   winktongue
<ul class="list-unstyled">
  <li><i class="bs-icon-bookingsync bs-icon-fw"></i> &nbsp; bookingsync</li>
  <li><i class="bs-icon-bigboss bs-icon-fw"></i> &nbsp; bigboss</li>
  <li><i class="bs-icon-winktongue bs-icon-fw"></i> &nbsp; winktongue</li>
</ul>

Iconography

  • translations
  • external
  • invoice
  • rental
  • photo
  • video
  • categories
  • description
  • contract
  • reservation
  • rates
  • payments
  • help
  • map
  • navigation
  • calendar
  • inbox
  • clients
  • owner
  • search
  • checkin
  • settings
  • maintenance
  • reports
  • cleaning
  • notifications
  • instant
  • amenities
  • applications
  • website
  • reviews
  • template
  • widget
<ul class="list-unstyled">
  <li><i class="icon-invoice"></i> invoice</li>
  <li><i class="icon-rental"></i> rental</li>
  <li><i class="icon-photo"></i> photo</li>
  <li><i class="icon-video"></i> video</li>
  <li><i class="icon-description"></i> description</li>
  <li><i class="icon-contract"></i> contract</li>
  <li><i class="icon-reservation"></i> reservation</li>
  <li><i class="icon-rates"></i> rates</li>
  <li><i class="icon-payments"></i> payments</li>
  <li><i class="icon-help"></i> help</li>
  <li><i class="icon-map"></i> map</li>
  <li><i class="icon-calendar"></i> calendar</li>
  <li><i class="icon-inbox"></i> inbox</li>
  <li><i class="icon-clients"></i> clients</li>
  <li><i class="icon-owner"></i> owner</li>
  <li><i class="icon-search"></i> search</li>
  <li><i class="icon-checkin"></i> check-in</li>
  <li><i class="icon-settings"></i> settings</li>
  <li><i class="icon-maintenance"></i> maintenance</li>
  <li><i class="icon-reports"></i> reports</li>
  <li><i class="icon-cleaning"></i> cleaning</li>
  <li><i class="icon-notifications"></i> notifications</li>
  <li><i class="icon-instant"></i> instant</li>
  <li><i class="icon-applications"></i> applications</li>
  <li><i class="icon-website"></i> website</li>
  <li><i class="icon-reviews"></i> reviews</li>
  <li><i class="icon-widget"></i> widget</li>
</ul>

Fixed width icons

  •   rental
  •   photo
  •   applications
<ul class="list-unstyled">
  <li><i class="icon-rental icon-fw"></i> &nbsp; rental</li>
  <li><i class="icon-clients icon-fw"></i> &nbsp; photo</li>
  <li><i class="icon-applications icon-fw"></i> &nbsp; applications</li>
</ul>

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Customizing headings

Fancy display heading With faded secondary text 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote..

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquotes with source

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Unordered list

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Ordered list

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

List unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these. For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Very long term can be truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt class="text-truncate">Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>

  <dt class="text-truncate">Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="text-truncate">Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="text-truncate">Very long term can be truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>