Overview

Kaleidoscope its not just a Bootstrap theme. It extends it by adding some variants to the bootstrap own components, adding some new components and integrating some external libraries.

Buttons

The theme includes some additional button variants.

Inverted buttons

Buttons suitable to appear on dark backgrounds.

<button type="button" class="btn inverted">Normal</button>
<button type="button" class="btn btn-default inverted">Default</button>
<button type="button" class="btn btn-primary inverted">Primary</button>
<button type="button" class="btn btn-success inverted">Success</button>
<button type="button" class="btn btn-info inverted">Info</button>
<button type="button" class="btn btn-warning inverted">Warning</button>
<button type="button" class="btn btn-danger inverted">Danger</button>
<button type="button" class="btn btn-link inverted">Link</button>

Circular buttons

Use only for icon buttons

The circular button size is fixed, so it's not adequate to be used with textual content, unless the text is very short. If the text is longer than the available space, the button will overflow.

<button type="button" class="btn btn-default circular" aria-label="Default button">
  <i class="icon icon-home" aria-hidden="true"></i>
</button>

<button type="button" class="btn btn-default circular inverted" aria-label="Default button">
  <i class="icon icon-home" aria-hidden="true"></i>
</button>

Breadcrumbs

In addition to the default bootstrap breadcumbs, there's an additional variant, inspired on Bootflat Bootstrap theme.

  1. Home
  2. Library
  3. Data
<ol class="breadcrumb arrow">
  <li><a href="#"><i class="icon icon-home"></i> Home</a></li>
  <li><a href="#"><i class="icon icon-list-alt"></i> Library</a></li>
  <li class="active"><span><i class="icon icon-calendar"></i> Data</span></li>
</ol>

Labels

Ribbon labels

Normal Foo bar

Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.

Default

Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.

Primary

Ground round strip steak beef, meatloaf chicken ball tip beef ribs sirloin pastrami t-bone capicola meatball pork.

Success

Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.

Info

Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.

Warning

Ground round strip steak beef, meatloaf chicken ball tip beef ribs sirloin pastrami t-bone capicola meatball pork.

Danger 
<div>
  <span class="label ribbon">Normal</span>
  <span class="label label-default ribbon right">Default</span>
  <span class="label label-primary ribbon"><i class="icon icon-apple"></i> Primary</span>
  <span class="label label-success ribbon right">Success</span>
  <span class="label label-info ribbon">Info</span>
  <span class="label label-warning ribbon right">Warning</span>
  <span class="label label-danger ribbon">Danger</span>
</div>

Corner ribbon labels

Corner ribbon labels must be inside a container with a overflow: hidden

Default Primary Info Danger

Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.

Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.

Ground round strip steak beef, meatloaf chicken ball tip beef ribs sirloin pastrami t-bone capicola meatball pork.

<div style="overflow: hidden;">
  <span class="label label-default ribbon-corner top-left">Default</span>
  <span class="label label-primary ribbon-corner top-right"><i class="icon icon-apple"></i> Primary</span>
  <span class="label label-info ribbon-corner bottom-left">Info</span>
  <span class="label label-danger ribbon-corner bottom-right"><i class="icon icon-github"></i> Danger</span>
</div>

Navs

Tabs

The theme includes some variants for the tabs, allowing its placement on any side.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

<div class="panel">
  <div class="tabbable tabs-below">
    <div class="tab-content">
      <div class="tab-pane fade active in" id="home2">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
      </div>
      <div class="tab-pane fade" id="profile2">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
      </div>
      <div class="tab-pane fade" id="dropdown2-1">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
      </div>
      <div class="tab-pane fade" id="dropdown2-2">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche ...</p>
      </div>
    </div>
    <ul id="myTab2" class="nav nav-tabs nav-justified">
      <li class="active">
        <a href="#home2" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile2" data-toggle="tab">Profile</a>
      </li>
      <li class="dropdown dropup">
        <a href="#" id="myTabDrop2-1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li>
            <a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a>
          </li>
          <li>
            <a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...

<div class="panel">
  <div class="tabbable tabs-left clearfix">
    <ul id="myTab1" class="nav nav-tabs">
      <li class="active">
        <a href="#home3" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile3" data-toggle="tab">Profile</a>
      </li>
      <li>
        <a href="#myTabDrop3" data-toggle="tab">Dropdown</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="home3">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
      </div>
      <div class="tab-pane fade" id="profile3">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
      </div>
      <div class="tab-pane fade" id="myTabDrop3">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
      </div>
    </div>
  </div>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...

<div class="panel">
  <div class="tabbable tabs-right clearfix">
    <ul id="myTab1" class="nav nav-tabs">
      <li class="active">
        <a href="#home4" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile4" data-toggle="tab">Profile</a>
      </li>
      <li>
        <a href="#myTabDrop4" data-toggle="tab">Dropdown</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="home4">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
      </div>
      <div class="tab-pane fade" id="profile4">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
      </div>
      <div class="tab-pane fade" id="myTabDrop4">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
      </div>
    </div>
  </div>
</div>

Additional table variants

Sortable indicators

First Second Third
1 2 3
1 2 3
1 2 3 
<table class="table">
  <thead>
    <tr>
      <th>First</th>
      <th class="sortable ascending">Second</th>
      <th class="sortable descending">Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Columns

The table-bordered tables only have borders on the table and the rows. Add the celled class to add borders to the cells

First Second Third
1 2 3
1 2 3
1 2 3 
<table class="table table-bordered celled">
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Filled tables

The tables are transparent by default. The filled class adds a background color to the cells.

First Second Third
1 2 3
1 2 3
1 2 3 
<table class="table filled">
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Inverted tables

First Second Third
1 2 3
1 2 3
1 2 3 
<table class="table inverted">
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Inverted tables can have color variants.

First Second Third
1 2 3
1 2 3
First Second Third
1 2 3
1 2 3
First Second Third
1 2 3
1 2 3
First Second Third
1 2 3
1 2 3
First Second Third
1 2 3
1 2 3 
<table class="table inverted primary">...</table>

<table class="table inverted info">...</table>

<table class="table inverted success">...</table>

<table class="table inverted warning">...</table>

<table class="table inverted danger">...</table>

Complex tables

The bordered tables have rounded borders and some other effects. In order to implement that effects, that tables need a border-collapse: separate;, and that rule can cause some problems on complex tables with colspans or rowspans. So apply a complex class to disable that rule.

First Second Grouped
Third Fourth
1 2 3 4
1 2 3 4 
<table class="table table-bordered complex">
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Containers

Jumbotron

Jumbotron component has been expanded to support full width images and caroussels.

Oh hai!

Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.

Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.

<div class="jumbotron">
  <div class="jumbotron-photo"><img src="http://lorempixel.com/555/333/cats/1" /></div>
  <h2>Oh hai!</h2>
  <p>Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.</p>
  <p>Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.</p>
</div>

Oh hai!

Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.

Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.

<div class="jumbotron">
  <div id="carousel-example" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example" data-slide-to="1"></li>
      <li data-target="#carousel-example" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active"><img src="http://lorempixel.com/555/333/cats/2"></div>
      <div class="item"><img src="http://lorempixel.com/555/333/cats/3"></div>
      <div class="item"><img src="http://lorempixel.com/555/333/cats/4"></div>
    </div>
    <a class="left carousel-control" href="#carousel-example" data-slide="prev">
      <span class="icon icon-prev icon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example" data-slide="next">
      <span class="icon icon-next icon-chevron-right"></span>
    </a>
  </div>
  <h2>Oh hai!</h2>
  <p>Bacon ipsum dolor amet turducken alcatra rump shank landjaeger ribeye short loin chuck.</p>
  <p>Kevin pancetta jerky andouille bresaola shankle frankfurter shoulder filet mignon turducken ball tip.</p>
</div>

Blankslate

Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well.

Ported from PrimerCSS

Basic example

This is a blank slate

Use it to provide information when no dynamic content exists.

<div class="blankslate">
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

Large format, with icons

This is a blank slate

Use it to provide information when no dynamic content exists.

<div class="blankslate large-format">
  <span class="icon icon-github"></span>
  <span class="icon icon-tags"></span>
  <span class="icon icon-code-fork"></span>
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

Fixed width

Narrows the blankslate container to not occupy the entire available width.

This is a blank slate

Use it to provide information when no dynamic content exists.

<div class="blankslate has-fixed-width">
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

Capped

Removes the border-radius on the top corners.

This is a blank slate

Use it to provide information when no dynamic content exists.

<div class="blankslate capped">
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

Spacious

Significantly increases the vertical padding.

This is a blank slate

Use it to provide information when no dynamic content exists.

<div class="blankslate spacious">
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

No background

Removes the background-color and border.

This is a blank slate

Use it to provide information when no dynamic content exists.

<div class="blankslate clean-background">
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

Font awesome

Font awesome icons can be used instead of Glyphicons. Both icon libraries can be used simultaneusly.

The default Font awesome prefix fa has been replaced to a more generic one icon, so it's easier to use another icon library.

  • icon icon-glass
  • icon icon-music
  • icon icon-search
  • icon icon-envelope-o
  • icon icon-heart
  • icon icon-star
  • icon icon-star-o
  • icon icon-user
  • icon icon-film
  • icon icon-th-large
  • icon icon-th
  • icon icon-th-list
  • icon icon-check
  • icon icon-remove
  • icon icon-close
  • icon icon-times
  • icon icon-search-plus
  • icon icon-search-minus
  • icon icon-power-off
  • icon icon-signal
  • icon icon-gear
  • icon icon-cog
  • icon icon-trash-o
  • icon icon-home
  • icon icon-file-o
  • icon icon-clock-o
  • icon icon-road
  • icon icon-download
  • icon icon-arrow-circle-o-down
  • icon icon-arrow-circle-o-up
  • icon icon-inbox
  • icon icon-play-circle-o
  • icon icon-rotate-right
  • icon icon-repeat
  • icon icon-refresh
  • icon icon-list-alt
  • icon icon-lock
  • icon icon-flag
  • icon icon-headphones
  • icon icon-volume-off
  • icon icon-volume-down
  • icon icon-volume-up
  • icon icon-qrcode
  • icon icon-barcode
  • icon icon-tag
  • icon icon-tags
  • icon icon-book
  • icon icon-bookmark
  • icon icon-print
  • icon icon-camera
  • icon icon-font
  • icon icon-bold
  • icon icon-italic
  • icon icon-text-height
  • icon icon-text-width
  • icon icon-align-left
  • icon icon-align-center
  • icon icon-align-right
  • icon icon-align-justify
  • icon icon-list
  • icon icon-dedent
  • icon icon-outdent
  • icon icon-indent
  • icon icon-video-camera
  • icon icon-photo
  • icon icon-image
  • icon icon-picture-o
  • icon icon-pencil
  • icon icon-map-marker
  • icon icon-adjust
  • icon icon-tint
  • icon icon-edit
  • icon icon-pencil-square-o
  • icon icon-share-square-o
  • icon icon-check-square-o
  • icon icon-arrows
  • icon icon-step-backward
  • icon icon-fast-backward
  • icon icon-backward
  • icon icon-play
  • icon icon-pause
  • icon icon-stop
  • icon icon-forward
  • icon icon-fast-forward
  • icon icon-step-forward
  • icon icon-eject
  • icon icon-chevron-left
  • icon icon-chevron-right
  • icon icon-plus-circle
  • icon icon-minus-circle
  • icon icon-times-circle
  • icon icon-check-circle
  • icon icon-question-circle
  • icon icon-info-circle
  • icon icon-crosshairs
  • icon icon-times-circle-o
  • icon icon-check-circle-o
  • icon icon-ban
  • icon icon-arrow-left
  • icon icon-arrow-right
  • icon icon-arrow-up
  • icon icon-arrow-down
  • icon icon-mail-forward
  • icon icon-share
  • icon icon-expand
  • icon icon-compress
  • icon icon-plus
  • icon icon-minus
  • icon icon-asterisk
  • icon icon-exclamation-circle
  • icon icon-gift
  • icon icon-leaf
  • icon icon-fire
  • icon icon-eye
  • icon icon-eye-slash
  • icon icon-warning
  • icon icon-exclamation-triangle
  • icon icon-plane
  • icon icon-calendar
  • icon icon-random
  • icon icon-comment
  • icon icon-magnet
  • icon icon-chevron-up
  • icon icon-chevron-down
  • icon icon-retweet
  • icon icon-shopping-cart
  • icon icon-folder
  • icon icon-folder-open
  • icon icon-arrows-v
  • icon icon-arrows-h
  • icon icon-bar-chart-o
  • icon icon-bar-chart
  • icon icon-twitter-square
  • icon icon-facebook-square
  • icon icon-camera-retro
  • icon icon-key
  • icon icon-gears
  • icon icon-cogs
  • icon icon-comments
  • icon icon-thumbs-o-up
  • icon icon-thumbs-o-down
  • icon icon-star-half
  • icon icon-heart-o
  • icon icon-sign-out
  • icon icon-linkedin-square
  • icon icon-thumb-tack
  • icon icon-external-link
  • icon icon-sign-in
  • icon icon-trophy
  • icon icon-github-square
  • icon icon-upload
  • icon icon-lemon-o
  • icon icon-phone
  • icon icon-square-o
  • icon icon-bookmark-o
  • icon icon-phone-square
  • icon icon-twitter
  • icon icon-facebook-f
  • icon icon-facebook
  • icon icon-github
  • icon icon-unlock
  • icon icon-credit-card
  • icon icon-rss
  • icon icon-hdd-o
  • icon icon-bullhorn
  • icon icon-bell
  • icon icon-certificate
  • icon icon-hand-o-right
  • icon icon-hand-o-left
  • icon icon-hand-o-up
  • icon icon-hand-o-down
  • icon icon-arrow-circle-left
  • icon icon-arrow-circle-right
  • icon icon-arrow-circle-up
  • icon icon-arrow-circle-down
  • icon icon-globe
  • icon icon-wrench
  • icon icon-tasks
  • icon icon-filter
  • icon icon-briefcase
  • icon icon-arrows-alt
  • icon icon-group
  • icon icon-users
  • icon icon-chain
  • icon icon-link
  • icon icon-cloud
  • icon icon-flask
  • icon icon-cut
  • icon icon-scissors
  • icon icon-copy
  • icon icon-files-o
  • icon icon-paperclip
  • icon icon-save
  • icon icon-floppy-o
  • icon icon-square
  • icon icon-navicon
  • icon icon-reorder
  • icon icon-bars
  • icon icon-list-ul
  • icon icon-list-ol
  • icon icon-strikethrough
  • icon icon-underline
  • icon icon-table
  • icon icon-magic
  • icon icon-truck
  • icon icon-pinterest
  • icon icon-pinterest-square
  • icon icon-google-plus-square
  • icon icon-google-plus
  • icon icon-money
  • icon icon-caret-down
  • icon icon-caret-up
  • icon icon-caret-left
  • icon icon-caret-right
  • icon icon-columns
  • icon icon-unsorted
  • icon icon-sort
  • icon icon-sort-down
  • icon icon-sort-desc
  • icon icon-sort-up
  • icon icon-sort-asc
  • icon icon-envelope
  • icon icon-linkedin
  • icon icon-rotate-left
  • icon icon-undo
  • icon icon-legal
  • icon icon-gavel
  • icon icon-dashboard
  • icon icon-tachometer
  • icon icon-comment-o
  • icon icon-comments-o
  • icon icon-flash
  • icon icon-bolt
  • icon icon-sitemap
  • icon icon-umbrella
  • icon icon-paste
  • icon icon-clipboard
  • icon icon-lightbulb-o
  • icon icon-exchange
  • icon icon-cloud-download
  • icon icon-cloud-upload
  • icon icon-user-md
  • icon icon-stethoscope
  • icon icon-suitcase
  • icon icon-bell-o
  • icon icon-coffee
  • icon icon-cutlery
  • icon icon-file-text-o
  • icon icon-building-o
  • icon icon-hospital-o
  • icon icon-ambulance
  • icon icon-medkit
  • icon icon-fighter-jet
  • icon icon-beer
  • icon icon-h-square
  • icon icon-plus-square
  • icon icon-angle-double-left
  • icon icon-angle-double-right
  • icon icon-angle-double-up
  • icon icon-angle-double-down
  • icon icon-angle-left
  • icon icon-angle-right
  • icon icon-angle-up
  • icon icon-angle-down
  • icon icon-desktop
  • icon icon-laptop
  • icon icon-tablet
  • icon icon-mobile-phone
  • icon icon-mobile
  • icon icon-circle-o
  • icon icon-quote-left
  • icon icon-quote-right
  • icon icon-spinner
  • icon icon-circle
  • icon icon-mail-reply
  • icon icon-reply
  • icon icon-github-alt
  • icon icon-folder-o
  • icon icon-folder-open-o
  • icon icon-smile-o
  • icon icon-frown-o
  • icon icon-meh-o
  • icon icon-gamepad
  • icon icon-keyboard-o
  • icon icon-flag-o
  • icon icon-flag-checkered
  • icon icon-terminal
  • icon icon-code
  • icon icon-mail-reply-all
  • icon icon-reply-all
  • icon icon-star-half-empty
  • icon icon-star-half-full
  • icon icon-star-half-o
  • icon icon-location-arrow
  • icon icon-crop
  • icon icon-code-fork
  • icon icon-unlink
  • icon icon-chain-broken
  • icon icon-question
  • icon icon-info
  • icon icon-exclamation
  • icon icon-superscript
  • icon icon-subscript
  • icon icon-eraser
  • icon icon-puzzle-piece
  • icon icon-microphone
  • icon icon-microphone-slash
  • icon icon-shield
  • icon icon-calendar-o
  • icon icon-fire-extinguisher
  • icon icon-rocket
  • icon icon-maxcdn
  • icon icon-chevron-circle-left
  • icon icon-chevron-circle-right
  • icon icon-chevron-circle-up
  • icon icon-chevron-circle-down
  • icon icon-html5
  • icon icon-css3
  • icon icon-anchor
  • icon icon-unlock-alt
  • icon icon-bullseye
  • icon icon-ellipsis-h
  • icon icon-ellipsis-v
  • icon icon-rss-square
  • icon icon-play-circle
  • icon icon-ticket
  • icon icon-minus-square
  • icon icon-minus-square-o
  • icon icon-level-up
  • icon icon-level-down
  • icon icon-check-square
  • icon icon-pencil-square
  • icon icon-external-link-square
  • icon icon-share-square
  • icon icon-compass
  • icon icon-toggle-down
  • icon icon-caret-square-o-down
  • icon icon-toggle-up
  • icon icon-caret-square-o-up
  • icon icon-toggle-right
  • icon icon-caret-square-o-right
  • icon icon-euro
  • icon icon-eur
  • icon icon-gbp
  • icon icon-dollar
  • icon icon-usd
  • icon icon-rupee
  • icon icon-inr
  • icon icon-cny
  • icon icon-rmb
  • icon icon-yen
  • icon icon-jpy
  • icon icon-ruble
  • icon icon-rouble
  • icon icon-rub
  • icon icon-won
  • icon icon-krw
  • icon icon-bitcoin
  • icon icon-btc
  • icon icon-file
  • icon icon-file-text
  • icon icon-sort-alpha-asc
  • icon icon-sort-alpha-desc
  • icon icon-sort-amount-asc
  • icon icon-sort-amount-desc
  • icon icon-sort-numeric-asc
  • icon icon-sort-numeric-desc
  • icon icon-thumbs-up
  • icon icon-thumbs-down
  • icon icon-youtube-square
  • icon icon-youtube
  • icon icon-xing
  • icon icon-xing-square
  • icon icon-youtube-play
  • icon icon-dropbox
  • icon icon-stack-overflow
  • icon icon-instagram
  • icon icon-flickr
  • icon icon-adn
  • icon icon-bitbucket
  • icon icon-bitbucket-square
  • icon icon-tumblr
  • icon icon-tumblr-square
  • icon icon-long-arrow-down
  • icon icon-long-arrow-up
  • icon icon-long-arrow-left
  • icon icon-long-arrow-right
  • icon icon-apple
  • icon icon-windows
  • icon icon-android
  • icon icon-linux
  • icon icon-dribbble
  • icon icon-skype
  • icon icon-foursquare
  • icon icon-trello
  • icon icon-female
  • icon icon-male
  • icon icon-gittip
  • icon icon-gratipay
  • icon icon-sun-o
  • icon icon-moon-o
  • icon icon-archive
  • icon icon-bug
  • icon icon-vk
  • icon icon-weibo
  • icon icon-renren
  • icon icon-pagelines
  • icon icon-stack-exchange
  • icon icon-arrow-circle-o-right
  • icon icon-arrow-circle-o-left
  • icon icon-toggle-left
  • icon icon-caret-square-o-left
  • icon icon-dot-circle-o
  • icon icon-wheelchair
  • icon icon-vimeo-square
  • icon icon-turkish-lira
  • icon icon-try
  • icon icon-plus-square-o
  • icon icon-space-shuttle
  • icon icon-slack
  • icon icon-envelope-square
  • icon icon-wordpress
  • icon icon-openid
  • icon icon-institution
  • icon icon-bank
  • icon icon-university
  • icon icon-mortar-board
  • icon icon-graduation-cap
  • icon icon-yahoo
  • icon icon-google
  • icon icon-reddit
  • icon icon-reddit-square
  • icon icon-stumbleupon-circle
  • icon icon-stumbleupon
  • icon icon-delicious
  • icon icon-digg
  • icon icon-pied-piper
  • icon icon-pied-piper-alt
  • icon icon-drupal
  • icon icon-joomla
  • icon icon-language
  • icon icon-fax
  • icon icon-building
  • icon icon-child
  • icon icon-paw
  • icon icon-spoon
  • icon icon-cube
  • icon icon-cubes
  • icon icon-behance
  • icon icon-behance-square
  • icon icon-steam
  • icon icon-steam-square
  • icon icon-recycle
  • icon icon-automobile
  • icon icon-car
  • icon icon-cab
  • icon icon-taxi
  • icon icon-tree
  • icon icon-spotify
  • icon icon-deviantart
  • icon icon-soundcloud
  • icon icon-database
  • icon icon-file-pdf-o
  • icon icon-file-word-o
  • icon icon-file-excel-o
  • icon icon-file-powerpoint-o
  • icon icon-file-photo-o
  • icon icon-file-picture-o
  • icon icon-file-image-o
  • icon icon-file-zip-o
  • icon icon-file-archive-o
  • icon icon-file-sound-o
  • icon icon-file-audio-o
  • icon icon-file-movie-o
  • icon icon-file-video-o
  • icon icon-file-code-o
  • icon icon-vine
  • icon icon-codepen
  • icon icon-jsfiddle
  • icon icon-life-bouy
  • icon icon-life-buoy
  • icon icon-life-saver
  • icon icon-support
  • icon icon-life-ring
  • icon icon-circle-o-notch
  • icon icon-ra
  • icon icon-rebel
  • icon icon-ge
  • icon icon-empire
  • icon icon-git-square
  • icon icon-git
  • icon icon-hacker-news
  • icon icon-tencent-weibo
  • icon icon-qq
  • icon icon-wechat
  • icon icon-weixin
  • icon icon-send
  • icon icon-paper-plane
  • icon icon-send-o
  • icon icon-paper-plane-o
  • icon icon-history
  • icon icon-genderless
  • icon icon-circle-thin
  • icon icon-header
  • icon icon-paragraph
  • icon icon-sliders
  • icon icon-share-alt
  • icon icon-share-alt-square
  • icon icon-bomb
  • icon icon-soccer-ball-o
  • icon icon-futbol-o
  • icon icon-tty
  • icon icon-binoculars
  • icon icon-plug
  • icon icon-slideshare
  • icon icon-twitch
  • icon icon-yelp
  • icon icon-newspaper-o
  • icon icon-wifi
  • icon icon-calculator
  • icon icon-paypal
  • icon icon-google-wallet
  • icon icon-cc-visa
  • icon icon-cc-mastercard
  • icon icon-cc-discover
  • icon icon-cc-amex
  • icon icon-cc-paypal
  • icon icon-cc-stripe
  • icon icon-bell-slash
  • icon icon-bell-slash-o
  • icon icon-trash
  • icon icon-copyright
  • icon icon-at
  • icon icon-eyedropper
  • icon icon-paint-brush
  • icon icon-birthday-cake
  • icon icon-area-chart
  • icon icon-pie-chart
  • icon icon-line-chart
  • icon icon-lastfm
  • icon icon-lastfm-square
  • icon icon-toggle-off
  • icon icon-toggle-on
  • icon icon-bicycle
  • icon icon-bus
  • icon icon-ioxhost
  • icon icon-angellist
  • icon icon-cc
  • icon icon-shekel
  • icon icon-sheqel
  • icon icon-ils
  • icon icon-meanpath
  • icon icon-buysellads
  • icon icon-connectdevelop
  • icon icon-dashcube
  • icon icon-forumbee
  • icon icon-leanpub
  • icon icon-sellsy
  • icon icon-shirtsinbulk
  • icon icon-simplybuilt
  • icon icon-skyatlas
  • icon icon-cart-plus
  • icon icon-cart-arrow-down
  • icon icon-diamond
  • icon icon-ship
  • icon icon-user-secret
  • icon icon-motorcycle
  • icon icon-street-view
  • icon icon-heartbeat
  • icon icon-venus
  • icon icon-mars
  • icon icon-mercury
  • icon icon-transgender
  • icon icon-transgender-alt
  • icon icon-venus-double
  • icon icon-mars-double
  • icon icon-venus-mars
  • icon icon-mars-stroke
  • icon icon-mars-stroke-v
  • icon icon-mars-stroke-h
  • icon icon-neuter
  • icon icon-facebook-official
  • icon icon-pinterest-p
  • icon icon-whatsapp
  • icon icon-server
  • icon icon-user-plus
  • icon icon-user-times
  • icon icon-hotel
  • icon icon-bed
  • icon icon-viacoin
  • icon icon-train
  • icon icon-subway
  • icon icon-medium

Selectize

The theme includes styles for Selectize, an amazing library to customise and extend the <select> and <input> elements.

Examples:

Tagging

Email Contacts

Option Groups

Toastr

Kaleidoscope includes styles for Toastr, a javascript library for Growl type non-blocking notifications.

The theme styles the notifications as Bootstrap alerts. In the example they appear inside the example container, but under regular use they should appear fixed on any of the viewport corners. See the library documentation.