Bootstrap Extend Easy-to-use components for Bootstrap 3

Watch Star Fork Issue

A set of useful extensions for the very popular Bootstrap framework.

Dependencies and usage

This framework depends heavily on Bootstrap 3 and jQuery. Include the dependencies (jQuery 2.2.4 or newer, Bootstrap 3 js and css files) in your <head> section and after them insert the following two lines to include Bootstrap-Extend:

<script type="text/javascript" src="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/880420ae663f7c539971ded33411cdecffcc2134/js/bootstrap-extend.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/880420ae663f7c539971ded33411cdecffcc2134/css/bootstrap-extend.min.css"/>

Alternatively you can download the files on your local machine from my Github page and include them using a local path.
Note: I know that RawGit is not 100% reliable and that sometimes problems can occur, as well as the fact that using a hash might look kinda clumsy, but this is a free project and so far this seems like my best option.

Components, CSS and Javascript

This framework is all about custom CSS styles for commonly used elements and responsive and lightweight components. Most of these components complement Bootstrap's aesthetic or aim to deal with its shortcomings in one way or another. More components will be added regularly. Bootstrap-Extend aims to eventually fill the gap left by Bootstrap in certain areas, without the need to include each component individually, but rather provide people with a consistent set of elements all in one place.
If you want to get individual components instead of the whole thing, head over to my Github page, find the components you need and copy paste the corresponding SCSS and Javascript files. You will need to compile the SCSS files locally before you have a working CSS file that you can use.

One extra button style Because there can never be enough

Use the .btn-notice class like any other button tag from Bootstrap. Inspired from the Bootstrap website's header colors.

Example


Usage:

<button class="btn btn-notice">Hello there!<button/>

Password field with toggle

Extend the functionality of your <input type="password"> fields by adding a button that toggles password display on or off. Simply add the .pwd class to your field and the .pwd-toggle class to a <span><span/> element in the same .input-group and users can now toggle password viewing on or off. When the form is submitted, the field will revert to type="password" regardless of its current state for security reasons. Just be sure to use an <input type="submit"> element to submit your form.

Example

Password:



Usage:

<div class="input-group">
  <input type="password" class="form-control pwd"/>
  <span class="text" class="form-control"></span>
</div>

   Original idea and implementation by Shell Bryson.

Toggle switches Rectangular, round, with text or without, all in pure CSS

Use the .switch class only on <input type="checkbox"> or <input type="radio"> elements. Don't forget to add a <label> after it and link it to the input's id. There are two types of toggle switches, round and rectangular. Both types have seven flavours, similar to the classic Bootstrap buttons:

  • .switch-round-default and .switch-rect-default
  • .switch-round-primary and .switch-rect-primary
  • .switch-round-success and .switch-rect-success
  • .switch-round-info and .switch-rect-info
  • .switch-round-warning and .switch-rect-warning
  • .switch-round-danger and .switch-rect-danger
  • .switch-round-notice and .switch-rect-notice

You can also add optional text labels to your toggle switches. There are three options of toggle switch text labels:

  • .switch-on-off (Displays "ON" and "OFF")
  • .switch-io (Displays the on and off symbols)
  • .switch-yes-no (Displays "YES" and "NO")

Examples

Round toggle switches:

Default Primary Success Info:
Radio button toggle switch group
Warning Danger Notice

Usage:

Default <input id="cT1" class="switch switch-round-default" type="checkbox"> <label for="cT1"></label>
Primary <input id="cT2" class="switch switch-round-primary" type="checkbox"> <label for="cT2"></label>
Success <input id="cT3" class="switch switch-round-success" type="checkbox"> <label for="cT3"></label>
Info <input id="cT4" class="switch switch-round-info"    type="checkbox"> <label for="cT4"></label>
<br>Radio button toggle switch group<br>
Warning <input id="cT5" class="switch switch-round-warning" type="radio" name="roundToggle"> <label for="cT5"></label>
Danger <input id="cT6" class="switch switch-round-danger"  type="radio" name="roundToggle"> <label for="cT6"></label>
Notice <input id="cT7" class="switch switch-round-notice"  type="radio" name="roundToggle"> <label for="cT7"></label>

Rectangular toggle switches:

Default Primary Success Info
Radio button toggle switch group
Warning Danger Notice

Usage:

Default <input id="rT1" class="switch switch-rect-default" type="checkbox"> <label for="rT1"></label>
Primary <input id="rT2" class="switch switch-rect-primary" type="checkbox"> <label for="rT2"></label>
Success <input id="rT3" class="switch switch-rect-success" type="checkbox"> <label for="rT3"></label>
Info <input id="rT4" class="switch switch-rect-info"    type="checkbox"> <label for="rT4"></label>
<br>Radio button toggle switch group<br>
Warning <input id="rT5" class="switch switch-rect-warning" type="radio" name="rectToggle"> <label for="rT5"></label>
Danger <input id="rT6" class="switch switch-rect-danger"  type="radio" name="rectToggle"> <label for="rT6"></label>
Notice <input id="rT7" class="switch switch-rect-notice"  type="radio" name="rectToggle"> <label for="rT7"></label>

Optional text:

Round toggle switches
On/Off I/O Yes/No
Rectangular toggle switches
On/Off I/O Yes/No

Usage:

Round toggle switches<br>
On/Off <input id="o1" class="switch switch-round-primary switch-on-off" type="checkbox"> <label for="o1"></label>
I/O <input id="o2" class="switch switch-round-primary switch-io" type="checkbox"> <label for="o2"></label>
Yes/No <input id="o3" class="switch switch-round-primary switch-yes-no" type="checkbox"> <label for="o3"></label>
<br>Rectangular toggle switches<br>
On/Off <input id="o4" class="switch switch-rect-primary switch-on-off" type="checkbox"> <label for="o4"></label>
I/O <input id="o5" class="switch switch-rect-primary switch-io" type="checkbox"> <label for="o5"></label>
Yes/No <input id="o6" class="switch switch-rect-primary switch-yes-no" type="checkbox"> <label for="o6"></label>

   Original idea and implementation by callmenick.com.

Use the .lightbox-toggle class on a link element surrounding an image element to create a lightbox that opens when you click on the image. Be sure to specify a unique id for the image element. The lightbox will automatically resize to properly fit your browser's size and change its size accordingly to the browser when the window is resized. You can use the alt attribute of the image to show a custom title in your lightbox, otherwise you can leave it blank to show the URL of the image.
Suggestion: Use this lightbox with Bootstrap's .thumbnail class and/or in combination with tooltips to show your users that the images can be viewed in a lightbox.

Examples

This image has an alt attribute specified for the title bar

Usage:

<a href="" class="thumbnail lightbox-toggle">
  <img alt="This image has an alt attribute specified for the title bar" id="light-img1" src="http://dummyimage.com/hd1080" data-toggle="tooltip" data-placement="top" title="View image">
</a>

<a href="" class="thumbnail lightbox-toggle">
  <img id="light-img2" src="http://dummyimage.com/vga" data-toggle="tooltip" data-placement="top" title="View image">
</a>

Numeric spinner

Make your numeric inputs prettier by using the .spinner class on an .input-group with a text input element and two buttons. Comes in two styles: arrows (.spinner-up-down class) and plus/minus (.spinner-plus-minus class).

Examples

Arrows:

Plus/Minus:

Usage:

<div class="input-group spinner spinner-up-down">
  <input type="text" class="form-control" value="25">
  <div>
    <button class="btn btn-default" type="button"></button>
    <button class="btn btn-default" type="button"></button>
  </div>
</div>

<div class="input-group spinner spinner-plus-minus">
  <input type="text" class="form-control" value="40">
  <div>
    <button class="btn btn-default" type="button"></button>
    <button class="btn btn-default" type="button"></button>
  </div>
</div>

   Original idea and implementation by Thomas Lebeau.

Collapse toggle box

Bootstrap's Collapse is great. But if you are looking for a different style for your content toggle buttons, you can now use the .btn-toggle class in combintion with a <label> element to achieve that. All the functionality of the original Bootstrap component remains intact.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur euismod lobortis. Donec odio justo, eleifend a lacinia quis, tempor vel nisi. Phasellus fermentum iaculis interdum. Nullam nec congue nisl. Donec a nisi velit. Cras eu elit in quam semper auctor ut sed lorem. In ac eleifend ligula. Sed vulputate id tortor in fringilla.

Etiam posuere luctus lorem, at tempus lectus varius vel. Nullam in elementum mauris. Aenean faucibus sagittis lacus, a viverra ante. Vestibulum a pharetra nibh. Nullam sit amet est a nisi tincidunt blandit in tristique dui. Integer sed viverra risus. Vivamus orci tortor, fermentum ac euismod eu, iaculis bibendum lectus.

Usage:

<!-- Link with href -->
<a class="btn btn-primary btn-toggle" role="button" data-toggle="collapse" 
   href="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">
</a>
<label>Link with href</label>
<div class="collapse" id="collapseLinkExample">
 <div class="well">
  ...
 </div>
</div>

<!-- Button with data-target -->
<button class="btn btn-default btn-toggle" type="button" data-toggle="collapse" 
   data-target="#collapseDataTargetExample" aria-expanded="false" aria-controls="collapseDataTargetExample">
</button>
<label>Button with data-target</label>
<div class="collapse" id="collapseDataTargetExample">
 <div class="well">
  ...
 </div>
</div>

Checkbox styles In 7 pure CSS flavours

Use the .chkbox class only on <input type="checkbox"> elements. Don't forget to add a <label> after it and link it to the checkbox's id. There are seven flavours of checkboxes, similar to the classic Bootstrap buttons:

  • .chkbox-default
  • .chkbox-primary
  • .chkbox-success
  • .chkbox-info
  • .chkbox-warning
  • .chkbox-danger
  • .chkbox-notice

You can also use the .chkbox-lg, .chkbox-sm and .chkbox-xs classes to change the size of your checkboxes.

Examples

Checkbox variants:


Usage:

<input type="checkbox" class="chkbox chkbox-default" id="chk-default"><label for="chk-default">Default</label>
<input type="checkbox" class="chkbox chkbox-primary" id="chk-primary"><label for="chk-primary">Primary</label>
<input type="checkbox" class="chkbox chkbox-success" id="chk-success"><label for="chk-success">Success</label>
<input type="checkbox" class="chkbox chkbox-info" id="chk-info"><label for="chk-info">Info</label>
<input type="checkbox" class="chkbox chkbox-warning" id="chk-warning"><label for="chk-warning">Warning</label>
<input type="checkbox" class="chkbox chkbox-danger" id="chk-danger"><label for="chk-danger">Danger</label>
<input type="checkbox" class="chkbox chkbox-notice" id="chk-notice"><label for="chk-notice">Notice</label>

Checkbox sizes:

Usage:

<input id="chL" class="chkbox chkbox-primary chkbox-lg" type="checkbox"> <label for="chL">Large checkbox</label>
<input id="chN" class="chkbox chkbox-primary" type="checkbox"> <label for="chN">Normal checkbox</label>
<input id="chS" class="chkbox chkbox-primary chkbox-sm" type="checkbox"> <label for="chS">Small checkbox</label>
<input id="chXS" class="chkbox chkbox-primary chkbox-xs" type="checkbox"> <label for="chXS">Extra small checkbox</label>

Radio button styles In 7 pure CSS flavours

Use the .rdbtn class only on <input type="radio"> elements. Don't forget to add a <label> after it and link it to the radio button's id. There are seven flavours of radio buttons, similar to the classic Bootstrap buttons:

  • .rdbtn-default
  • .rdbtn-primary
  • .rdbtn-success
  • .rdbtn-info
  • .rdbtn-warning
  • .rdbtn-danger
  • .rdbtn-notice

You can also use the .rdbtn-lg, .rdbtn-sm and .rdbtn-xs classes to change the size of your radio buttons.

Examples

Radio button variants:


Usage:

<input type="radio" class="rdbtn rdbtn-default" id="rdb-default"><label for="rdb-default">Default</label>
<input type="radio" class="rdbtn rdbtn-primary" id="rdb-primary" name="rd-group"><label for="rdb-primary">Primary</label>
<input type="radio" class="rdbtn rdbtn-success" id="rdb-success" name="rd-group"><label for="rdb-success">Success</label>
<input type="radio" class="rdbtn rdbtn-info" id="rdb-info" name="rd-group"><label for="rdb-info">Info</label>
<input type="radio" class="rdbtn rdbtn-warning" id="rdb-warning" name="rd-group"><label for="rdb-warning">Warning</label>
<input type="radio" class="rdbtn rdbtn-danger" id="rdb-danger" name="rd-group"><label for="rdb-danger">Danger</label>
<input type="radio" class="rdbtn rdbtn-notice" id="rdb-notice" name="rd-group"><label for="rdb-notice">Notice</label>

Radio button sizes:

Usage:

<input id="rdL" class="rdbtn rdbtn-primary rdbtn-lg" name="test-s" type="radio"> <label for="rdL">Large radio  </label>
<input id="rdN" class="rdbtn rdbtn-primary" name="test-s" type="radio"> <label for="rdL">Normal radio  </label>
<input id="rdS" class="rdbtn rdbtn-primary rdbtn-sm" name="test-s" type="radio"> <label for="rdL">Small radio  </label>
<input id="rdXS" class="rdbtn rdbtn-primary rdbtn-xs" name="test-s" type="radio"> <label for="rdL">Extra small radio  </label>

List element styles Lots of pure CSS options

Use the .urd class for unordered lists or the .ord class for ordered lists in combination with one of the three styles (disc, circle and square). Apart from that, you can use the .urd-big to make your unordered list bullets larger. There are 7 color combinations, along with the above options:

  • .urd-disc-default, .urd-circle-default and .urd-square-default
  • .urd-disc-primary, .urd-circle-primary and .urd-square-primary
  • .urd-disc-success, .urd-circle-success and .urd-square-success
  • .urd-disc-info, .urd-circle-info and .urd-square-info
  • .urd-disc-warning, .urd-circle-warning and .urd-square-warning
  • .urd-disc-danger, .urd-circle-danger and .urd-square-danger
  • .urd-disc-notice, .urd-circle-notice and .urd-square-notice

Similarly, you can use the classes for ordered lists by replacing .urd- with .ord-. Note that ordered lists using these classes only use the decimal value for the list-style attribute and different values will not be taken into account.

Examples

Unordered lists

  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element

Usage:

<ul class="urd urd-disc-primary">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ul>

<ul class="urd urd-circle-default">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ul>

<ul class="urd urd-square-success">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ul>

Unordered lists - larger bullets

  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element
  • This is a list element

Usage:

<ul class="urd urd-disc-warning urd-big">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ul>

<ul class="urd urd-circle-danger urd-big">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ul>

<ul class="urd urd-square-notice urd-big">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ul>

Ordered lists

  1. This is a list element
  2. This is a list element
  3. This is a list element
  1. This is a list element
  2. This is a list element
  3. This is a list element
  1. This is a list element
  2. This is a list element
  3. This is a list element

Usage:

<ol class="ord ord-disc-primary">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ol>

<ol class="ord ord-circle-default">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ol>

<ol class="ord ord-square-info">
  <li>This is a list element</li>
  <li>This is a list element</li>
  <li>This is a list element</li>
</ol>

Alternative select style In pure CSS New!

Use the .slct class to give a new style to your <select> elements. Note: this particular class might not work in older versions of Internet Explorer.

Example


Usage:

<select class="slct">
  <option>Apples</option>
  <option selected>Oranges</option>
  <option>Strawberries</option>
  <option>Cherries</option>
</select>