Overview

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
This Extension provides another big wing and addition to you websites and applications.

Features

  • Responsive Bootstrap theme
  • Served over fast GitHub CDN
  • Multi-browser and platform support
  • Automatic Cache
  • Easily Customizable
  • Easy to Install

Installation

Download the zip

Download the zipped folder and copy the lib folder contents into your sites' root folder.

Bootstrap Extension CDN

Just use these CDN links

  <!-- Colors Bootstrap Extension -->
  <link href="https://cdn.rawgit.com/midhruvjaink/bootstrap-ext/master/lib/bootstrap-color.css" rel="stylesheet" />

  <!-- Latest compiled and minified CSS -->
  <link href="https://cdn.rawgit.com/midhruvjaink/bootstrap-ext/master/lib/bootstrap-color.min.css" rel="stylesheet" />

  <!-- Loaders Bootstrap Extension -->
  <link href="https://cdn.rawgit.com/midhruvjaink/bootstrap-ext/master/lib/bootstrap-loader.css" rel="stylesheet" />

  <!-- Latest compiled and minified CSS -->
  <link href="https://cdn.rawgit.com/midhruvjaink/bootstrap-ext/master/lib/bootstrap-loader.min.css" rel="stylesheet" />

Usage

Colors

All HTML tags and controls elements with .color-text can be styled with the color specified and adding extra .text-lighten-1/5, .text-accent-1/5 or .text-darken-1/5 can lighten or darken the color respectively.

<div class="red-text text-lighten-3"></div>
<p class="green-text text-darken-5"></p>

Background color or Highlight can also be styled by adding .color-bg class to the HTML element. And similarly the color can be lightened or darkened by adding corresponding .lighten-1/5, .accent-1/5 or .darken-1/5 classes to the element. 

  <div class="yellow-bg lighten-2"></div>
  <p class="purple-bg darken-4"></p>
red-bg
red-bg lighten-5
red-bg lighten-4
red-bg lighten-3
red-bg lighten-2
red-bg lighten-1
red-bg darken-4
red-bg darken-3
red-bg darken-2
red-bg darken-1
red-bg accent-4
red-bg accent-3
red-bg accent-2
red-bg accent-1
pink-bg
pink-bg lighten-5
pink-bg lighten-4
pink-bg lighten-3
pink-bg lighten-2
pink-bg lighten-1
pink-bg darken-4
pink-bg darken-3
pink-bg darken-2
pink-bg darken-1
pink-bg accent-4
pink-bg accent-3
pink-bg accent-2
pink-bg accent-1
purple-bg
purple-bg lighten-5
purple-bg lighten-4
purple-bg lighten-3
purple-bg lighten-2
purple-bg lighten-1
purple-bg darken-4
purple-bg darken-3
purple-bg darken-2
purple-bg darken-1
purple-bg accent-4
purple-bg accent-3
purple-bg accent-2
purple-bg accent-1
deep-purple-bg
deep-purple-bg lighten-5
deep-purple-bg lighten-4
deep-purple-bg lighten-3
deep-purple-bg lighten-2
deep-purple-bg lighten-1
deep-purple-bg darken-4
deep-purple-bg darken-3
deep-purple-bg darken-2
deep-purple-bg darken-1
deep-purple-bg accent-4
deep-purple-bg accent-3
deep-purple-bg accent-2
deep-purple-bg accent-1


indigo-bg
indigo-bg lighten-5
indigo-bg lighten-4
indigo-bg lighten-3
indigo-bg lighten-2
indigo-bg lighten-1
indigo-bg darken-4
indigo-bg darken-3
indigo-bg darken-2
indigo-bg darken-1
indigo-bg accent-4
indigo-bg accent-3
indigo-bg accent-2
indigo-bg accent-1
blue-bg
blue-bg lighten-5
blue-bg lighten-4
blue-bg lighten-3
blue-bg lighten-2
blue-bg lighten-1
blue-bg darken-4
blue-bg darken-3
blue-bg darken-2
blue-bg darken-1
blue-bg accent-4
blue-bg accent-3
blue-bg accent-2
blue-bg accent-1
light-blue-bg
light-blue-bg lighten-5
light-blue-bg lighten-4
light-blue-bg lighten-3
light-blue-bg lighten-2
light-blue-bg lighten-1
light-blue-bg darken-4
light-blue-bg darken-3
light-blue-bg darken-2
light-blue-bg darken-1
light-blue-bg accent-4
light-blue-bg accent-3
light-blue-bg accent-2
light-blue-bg accent-1
cyan-bg
cyan-bg lighten-5
cyan-bg lighten-4
cyan-bg lighten-3
cyan-bg lighten-2
cyan-bg lighten-1
cyan-bg darken-4
cyan-bg darken-3
cyan-bg darken-2
cyan-bg darken-1
cyan-bg accent-4
cyan-bg accent-3
cyan-bg accent-2
cyan-bg accent-1


teal-bg
teal-bg lighten-5
teal-bg lighten-4
teal-bg lighten-3
teal-bg lighten-2
teal-bg lighten-1
teal-bg darken-4
teal-bg darken-3
teal-bg darken-2
teal-bg darken-1
teal-bg accent-4
teal-bg accent-3
teal-bg accent-2
teal-bg accent-1
green-bg
green-bg lighten-5
green-bg lighten-4
green-bg lighten-3
green-bg lighten-2
green-bg lighten-1
green-bg darken-4
green-bg darken-3
green-bg darken-2
green-bg darken-1
green-bg accent-4
green-bg accent-3
green-bg accent-2
green-bg accent-1
light-green-bg
light-green-bg lighten-5
light-green-bg lighten-4
light-green-bg lighten-3
light-green-bg lighten-2
light-green-bg lighten-1
light-green-bg darken-4
light-green-bg darken-3
light-green-bg darken-2
light-green-bg darken-1
light-green-bg accent-4
light-green-bg accent-3
light-green-bg accent-2
light-green-bg accent-1
lime-bg
lime-bg lighten-5
lime-bg lighten-4
lime-bg lighten-3
lime-bg lighten-2
lime-bg lighten-1
lime-bg darken-4
lime-bg darken-3
lime-bg darken-2
lime-bg darken-1
lime-bg accent-4
lime-bg accent-3
lime-bg accent-2
lime-bg accent-1


yellow-bg
yellow-bg lighten-5
yellow-bg lighten-4
yellow-bg lighten-3
yellow-bg lighten-2
yellow-bg lighten-1
yellow-bg darken-4
yellow-bg darken-3
yellow-bg darken-2
yellow-bg darken-1
yellow-bg accent-4
yellow-bg accent-3
yellow-bg accent-2
yellow-bg accent-1
amber-bg
amber-bg lighten-5
amber-bg lighten-4
amber-bg lighten-3
amber-bg lighten-2
amber-bg lighten-1
amber-bg darken-4
amber-bg darken-3
amber-bg darken-2
amber-bg darken-1
amber-bg accent-4
amber-bg accent-3
amber-bg accent-2
amber-bg accent-1
orange-bg
orange-bg lighten-5
orange-bg lighten-4
orange-bg lighten-3
orange-bg lighten-2
orange-bg lighten-1
orange-bg darken-4
orange-bg darken-3
orange-bg darken-2
orange-bg darken-1
orange-bg accent-4
orange-bg accent-3
orange-bg accent-2
orange-bg accent-1
deep-orange-bg
deep-orange-bg lighten-5
deep-orange-bg lighten-4
deep-orange-bg lighten-3
deep-orange-bg lighten-2
deep-orange-bg lighten-1
deep-orange-bg darken-4
deep-orange-bg darken-3
deep-orange-bg darken-2
deep-orange-bg darken-1
deep-orange-bg accent-4
deep-orange-bg accent-3
deep-orange-bg accent-2
deep-orange-bg accent-1


brown-bg
brown-bg lighten-5
brown-bg lighten-4
brown-bg lighten-3
brown-bg lighten-2
brown-bg lighten-1
brown-bg darken-4
brown-bg darken-3
brown-bg darken-2
brown-bg darken-1
grey-bg
grey-bg lighten-5
grey-bg lighten-4
grey-bg lighten-3
grey-bg lighten-2
grey-bg lighten-1
grey-bg darken-4
grey-bg darken-3
grey-bg darken-2
grey-bg darken-1
blue-grey-bg
blue-grey-bg lighten-5
blue-grey-bg lighten-4
blue-grey-bg lighten-3
blue-grey-bg lighten-2
blue-grey-bg lighten-1
blue-grey-bg darken-4
blue-grey-bg darken-3
blue-grey-bg darken-2
blue-grey-bg darken-1
black-bg
white-bg
transparent

Loaders

Add CSS loaders to your website with including just one class in the div element tag.

<div class="loader-class"></div>

The following classes yields to the corresponding loaders:

.slack-loader



.clock



.loader3



.circle-gravity



.square-juggle



.page-flip

More loaders coming up.. Fell free to add more by contributing.