Get Started

Wired (currently v1.1.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Wired

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

Coming Soon...

Source Code

Source Sass, JavaScript, and font files, along with our docs. Requires a Sass compiler and some setup.

Coming Soon...

CSS Preprocessors

Wired uses Sass just because it gives us extra power while coding. Bourbon is our mixin library of choice. However if you’re not into preprocessors (you should really give it a try!), you can just use the CSS files and delete the SASS folder.

Compiling CSS

Wired uses Gulp for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installing Gulp

Install gulp globally:
$ npm install --global gulp
Install gulp in your project devDependencies:
npm install --save-dev gulp gulp-sass gulp-watch

Create a gulpfile.js at the root of your project:


var gulp         = require(gulp),
   sass          = require(gulp-sass),
   watch         = require(gulp-watch);

gulp.task(sass, function () {
 return gulp.src(sass/*.scss)
          .pipe(sass().on(error, sass.logError))
          .pipe(gulp.dest(dist/css))
          .pipe(sass({outputStyle: compressed}));
});

gulp.task(watch, function () { 
  gulp.watch(sass/*.scss, [sass]);
});

gulp.task(default, [watch]);

Run gulp:
$ gulp watch

Examples

Extension to Bootstrap's native templates

Bootstrap template

This is Bootstrap's native template. Nothing but the basics: compiled CSS and JavaScript along with a container.

Wired template

This is Wired's starter template. Replacing Bootstrap's native collapsable menu on mobile.

Sign-in page

Custom form layout and design for a simple sign in form.

Sign-up Page

Custom form layout and design for a simple sign up form.

404

General template for a 404 page

Grid

Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts

row must be placed within a .container (fixed-width), .container-fluid (full-width) for proper alignment and padding or either .container-xs .container-sm .container-md .container-lg for different width sizes
Use rows to create horizontal groups of columns. You must start with row
There are predefined classes of columns starting from 1 to 12, example col-md-1 to col-md-12
Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
You can create different grid pattern that finally forms 12
You can change the gutter (padding between columns) size by adding no-gutter, sm-gutter, md-gutter beside row

Example

.col-md-1

.col-md-8

.col-md-4

.col-md-6


    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>

    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row"> 
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>

Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Typography

Header 1

Wired Heading

Header 2

Wired Heading

Header 3

Wired Heading

Header 4

Wired Heading

Header 5

Wired Heading

Header 6

Wired Heading

Paragraph

Let me get this straight. You think that your client, one of the wealthiest, most powerful men in the world is secretly a vigilante who spends his nights beating criminals to a pulp with his bare hands and your plan is to blackmail this person? Good luck.

Image

Lead Text

My name is Merely Ducard but I speak for Ra's al Ghul... a man greatly feared by the criminal underworld. A mon who can offer you a path.

Quote

Batman may have made the front page but Bruce Wayne got pushed to page eight.

Small Font

Batman may have made the front page but Bruce Wayne got pushed to page eight.

Icons

Wired is using Font Awesome for its icons replacing Bootstrap's native Glyph icons.

Font Awesome Guides

Buttons

Colors

Wired buttons use the same contextual classes introduced in Bootstrap

Example

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

Button animation

Content inside a button can be animate on hover. Simply include the classes .btn-animated together with .from-top or .from-left to specify the animation direction, followed by the desired icon font class name (ex: fa fa-check)

Example

<button class="btn btn-primary btn-animated from-left fa fa-check" type="button">
    <span>Checkbox</span>
</button>
<button class="btn btn-primary btn-animated from-top fa fa-times" type="button">
    <span>Times</span>
</button>

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline ones to remove all background images and colors on any button.

Example

<button class="btn btn-primary-outline">Primary</button>
<button class="btn btn-success-outline">Success</button>
<button class="btn btn-info-outline">Info</button>
<button class="btn btn-warning-outline">Warning</button>
<button class="btn btn-danger-outline">Danger</button>

Rounded Buttons

Any button can be made to have rounded corners by adding .btn-rounded

Example

<!-- Large rounded button -->
<button class="btn btn-primary btn-lg btn-rounded">Large rounded</button>

<!-- Regular rounded button -->
<button class="btn btn-primary btn-rounded">Regular</button>

<!-- Small rounded button -->
<button class="btn btn-primary btn-sm btn-rounded">Small</button>

Box Buttons

Don't like buttons with slightly rounded corners? Just add .btn-box to turn it into a box button

Example

<!-- Large box button -->
<button class="btn btn-primary btn-lg btn-box">Large button</button>

<!-- Regular box button -->
<button class="btn btn-primary btn-box">Regular</button>

<!-- Small box button -->
<button class="btn btn-primary btn-sm btn-box">Small</button>

Offcanvas

Replaced Bootstrap's native collapsable menu bar on mobile

Example

<nav class="navbar navbar-inverse bg-menu navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> 
      <a href="../../" class="navbar-brand pd-y-10">
         <img src="../assets/images/logo-light.svg" width="90" alt="">
      </a>
    </div>
    <div id="navbar" class="navbar-offcanvas" data-direction="right" data-theme="">
      <button type="button" class="dismiss hidden-sm hidden-md hidden-lg" data-toggle="offcanvas" data-target="#navbar">
        <span aria-hidden="true">&#xD7;</span>
      </button>

      <ul class="nav navbar-nav">
        <li class="active"><a href="#0">Home</a></li>
        <li><a href="#0">About</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Grid</a></li>
            <li><a href="#">Colors</a></li>
            <li><a href="#">Typography</a></li>
            <li><a href="#">Forms</a></li>
            <li><a href="#">Helpers</a></li>
          </ul>
        </li>
         <li><a href="#0">Contact</a></li>
      </ul>
    </div><!--/.nav-offcanvas -->
  </div>
</nav>

Direction

Change Offcanvas' position via data-direction

Example

<div id="navbar" class="navbar-offcanvas" data-direction="right">...</div> 
<div id="navbar" class="navbar-offcanvas" data-direction="left">...</div>

Theme

Change Offcanvas' theme via data-theme

Example

<div id="navbar" class="navbar-offcanvas" data-direction="right" data-theme="dark">...</div> 
<div id="navbar" class="navbar-offcanvas" data-direction="left" data-theme="light">...</div>

Breadcrumbs

Breadcrumbs are created using Bootstrap Native Breadcrumbs, they will work as the same way how it works in bootstrap, but it is styled to wired color scheme.

Bootstrap Dropdown Guides

Example

<ol class="breadcrumb">
  <li class="active">Home</li>
</ol>
<ol class="breadcrumb">
   <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
</ol>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Dropdowns

Dropdowns are created using Bootstrap Native Dropdowns, they will work as the same way how it works in bootstrap, but it is styled to wired color scheme.

Bootstrap Dropdown Guides

Example

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Tabs

Tabs are created using Bootstrap Native Tabs, they will work as the same way how it works in bootstrap, but it is styled to wired color scheme.

Bootstrap Tab Guides

Option #1

Add nav-tabs-simple class next to nav-tabs for a line tab layout.

Colors

Use the same contextual classes introduced in Bootstrap

nav-tabs-primary

nav-tabs-success

nav-tabs-complete

nav-tabs-warning

nav-tabs-danger

Example

...

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-primary nav-tabs-simple" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> 

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

Option #2

Add nav-tabs-caret class next to nav-tabs for a arrow tab layout.

Example

...


<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-caret" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> 

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

Tooltips

Tooltip are created using Bootstrap Native Progress bars, they will work as the same way how it works in bootstrap, but it is styled to wired color scheme.

Bootstrap Tooltip Guides

Four Directions

Four options are available: top, right, bottom, and left aligned.

Examples

<button class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on Left</button>

<button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on Top">Tooltip on Top</button>

<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on Bottom">Tooltip on Bottom</button>

<button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on Right">Tooltip on Right</button>

Colors

Wired buttons use the same contextual classes introduced in Bootstrap

Examples

<button class="btn btn-default tooltip-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip Primary</button>

<button class="btn btn-default tooltip-success" data-toggle="tooltip" data-placement="top" title="Tooltip on Top">Tooltip Success</button>

<button class="btn btn-default tooltip-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on Bottom">Tooltip Info</button>

<button class="btn btn-default tooltip-warning" data-toggle="tooltip" data-placement="left" title="Tooltip on Bottom">Tooltip Warning</button>

<button class="btn btn-default tooltip-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on Right">Tooltip Danger</button>

Notification

These are powered by Sweet Alert 2 plugin. Follow these steps to initialize a alert notification in your page

Please refer to Sweet Alert 2 Documentation to learn about plugin options

Step one

Include the stylesheet sweetalert2.min.css inside the head tag.


  <link type="text/css" rel="stylesheet" href="assets/plugins/sweetalert/css/sweetalert2.min.css">

Step two

Include the required javascript files inside the body before core template script inclusions..


  <link type="text/css" rel="stylesheet" href="assets/plugins/sweetalert/js/sweetalert2.min.js">

Step three

Apply the plugin by replacing your alert() function with swal() on your JS.

Example

<script> 
  $(document).ready(function() {
      // Show basic message
      $('[data-plugin="sweetAlert"]').on('click', function(){
         swal('The Internet?', 'That thing is still around?');
      });

      // Show success message
      $('[data-plugin="sweetAlert"][data-alert="success"]').on('click', function(){
         swal(   'Good job!',  'You clicked the button!',   'success' );
      });

      // Show error message
      $('[data-plugin="sweetAlert"][data-alert="danger"]').on('click', function(){
       swal(   'Oops...',  'Something went wrong!!',   'error' );
      });
  });
</script>

Forms

Form Controls

Form Controls are created using Bootstrap Native Form Controls, they will work as the same way how it works in bootstrap. Individual form controls automatically receive some global styling.

All textual input, textarea, and select elements with .form-control are set to width: 100% by default. Wrap labels and controls in .form-group for optimum spacing.

Bootstrap Form Control Guides

Option

Change native layout of input fields class by wrapping it with form-line. These are retina compatible and available in all Bootstrap's contextual classes (ex: .form-line-primary)

Example

<form>
  <div class="form-group form-line">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group form-line">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-line"> 
    <div class="inputfile">
      <input type="file" name="file" id="file" class="form-control">
      <label for="file">Choose a file...</label>
    </div>
  </div> 
  <div class="form-group">
    <div class="checkbox checkbox-success">
        <input type="checkbox" checked="checked" value="1" id="checkbox1">
        <label for="checkbox1">Keep Me Signed in</label>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>

Input File

Get rid of native look n' feel with our very own custom input file written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .inputfile-primary)

Example

Choose a file...

<div class="inputfile">
  <input type="file" name="file" id="file1" class="form-control">
  <label for="file1">Choose a file...</label>
</div>

<div class="inputfile inputfile-default">
  <input type="file" name="file" id="file2" class="form-control">
  <label for="file2"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-primary">
  <input type="file" name="file" id="file3" class="form-control">
  <label for="file3"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-success">
  <input type="file" name="file" id="file4" class="form-control">
  <label for="file4"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-complete">
  <input type="file" name="file" id="file5" class="form-control">
  <label for="file5"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-warning">
  <input type="file" name="file" id="file6" class="form-control">
  <label for="file6"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-danger">
  <input type="file" name="file" id="file7" class="form-control">
  <label for="file7"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

Outline Input File

Replace the default modifier classes with the .inputfile-*-outline ones to remove all background images and colors on any input file.

Example

Choose a file...

<div class="inputfile inputfile-primary-outline">
  <input type="file" name="file" id="file8" class="form-control">
  <label for="file8"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-success-outline">
  <input type="file" name="file" id="file9" class="form-control">
  <label for="file9"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-complete-outline">
  <input type="file" name="file" id="file10" class="form-control">
  <label for="file10"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-warning-outline">
  <input type="file" name="file" id="file11" class="form-control">
  <label for="file11"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

<div class="inputfile inputfile-danger-outline">
  <input type="file" name="file" id="file12" class="form-control">
  <label for="file12"><i class="fa fa-fw fa-upload"></i> Choose a file...</label>
</div>

Checkbox controls

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .checkbox-primary)

Example

Keep Me Signed in

I agree

Mark

Steve Jobs

Action

Mark as read

<div class="checkbox check-default">
    <input type="checkbox" checked="checked" value="1" id="checkbox1">
    <label for="checkbox1">Keep Me Signed in</label>
</div>

<div class="checkbox checkbox-success  ">
    <input type="checkbox" checked="checked" value="1" id="checkbox2">
    <label for="checkbox2">I agree</label>
</div>

<div class="checkbox checkbox-primary">
    <input type="checkbox" checked="checked" value="1" id="checkbox3">
    <label for="checkbox3">Mark</label>
</div>

<div class="checkbox checkbox-info">
    <input type="checkbox" checked="checked" value="1" id="checkbox4">
    <label for="checkbox4">Steve Jobs</label>
</div>

<div class="checkbox checkbox-warning">
    <input type="checkbox" checked="checked" value="1" id="checkbox5">
    <label for="checkbox5">Action</label>
</div>

<div class="checkbox checkbox-danger">
    <input type="checkbox" checked="checked" value="1" id="checkbox6">
    <label for="checkbox6">Mark as read</label>
</div>

State options

These act the same way as normal HTML check boxes. Here are some states that

Example

Checkbox No. 1

Checkbox No. 2


<div class="checkbox checkbox-success">
    <input type="checkbox" disabled="disabled" value="check1" name="check" id="check1">
    <label for="check1">Checkbox No. 1</label>
</div>
<div class="checkbox checkbox-success">
    <input type="checkbox" disabled="disabled" checked="checked" value="check2" name="check" id="check2">
    <label for="check2">Checkbox No. 2</label>
</div>

Toggle controls

Get rid of native look n' feel with our very own custom radio buttons written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .check-primary)

<div class="radio radio-default">
    <input type="radio" checked="checked" value="yes" name="radio1" id="radio1Yes">
    <label for="radio1Yes">Agree</label>
    <input type="radio" value="no" name="radio1" id="radio1No">
    <label for="radio1No">Disagree</label>
</div>

<div class="radio radio-success">
    <input type="radio" checked="checked" value="yes" name="radio2" id="radio2Yes">
    <label for="radio2Yes">Male</label>
    <input type="radio" value="no" name="radio2" id="radio2No">
    <label for="radio2No">Female</label>
</div>

<div class="radio radio-primary">
    <input type="radio" checked="checked" value="yes" name="radio3" id="radio3Yes">
    <label for="radio3Yes">High</label>
    <input type="radio" value="no" name="radio3" id="radio3No">
    <label for="radio3No">Low</label>
</div>

<div class="radio radio-info">
    <input type="radio" checked="checked" value="yes" name="radio4" id="radio4Yes">
    <label for="radio4Yes">HTML</label>
    <input type="radio" value="no" name="radio4" id="radio4No">
    <label for="radio4No">JS</label>
</div>

<div class="radio radio-warning">
    <input type="radio" checked="checked" value="yes" name="radio5" id="radio5Yes">
    <label for="radio5Yes">Chrome</label>
    <input type="radio" value="no" name="radio5" id="radio5No">
    <label for="radio5No">Firefox</label>
</div>

<div class="radio radio-danger">
    <input type="radio" checked="checked" value="yes" name="radio6" id="radio6Yes">
    <label for="radio6Yes">iOS</label>
    <input type="radio" value="no" name="radio6" id="radio6No">
    <label for="radio6No">Android</label>
</div>

State options

These act the same way as normal HTML radio boxes. Here are some states that

Example

Disabled Disabled

<div class="radio radio-primary">
<input type="radio" disabled="disabled" value="Disabled" name="Disabled" id="Disabled">
<label for="Disabled">Disabled</label>
<input type="radio" disabled="disabled" checked="checked" value="ADisabled" name="ADisabled" id="ADisabled">
<label for="ADisabled">Disabled</label>
</div>

Switch controls

Turn your checkboxes into IOS 7 style switches.


<div class="switch">
    <input type="checkbox" checked value="switch" name="switch" id="switch1">
    <label for="switch1"></label>
</div>

<div class="switch switch-primary">
    <input type="checkbox" checked value="switch" name="switch" id="switch2">
    <label for="switch2"></label>
</div>

 <div class="switch switch-success">
    <input type="checkbox" checked value="switch" name="switch" id="switch3">
    <label for="switch3"></label>
</div>

 <div class="switch switch-info">
    <input type="checkbox" checked value="switch" name="switch" id="switch4">
    <label for="switch4"></label>
</div>

 <div class="switch switch-warning">
    <input type="checkbox" checked value="switch" name="switch" id="switch5">
    <label for="switch5"></label>
</div>

 <div class="switch switch-danger">
    <input type="checkbox" checked value="switch" name="switch" id="switch6">
    <label for="switch6"></label>
</div>

WYSIWYG editor

These are powered by bootstrap-wysihtml5 jQuery plugin. Follow these steps to initialize a WYSIWYG editor in your page

Please refer to bootstrap-wysihtml5 Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap-wysihtml5.min.css inside the head tag.


  <link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-wysihtml5/css/bootstrap-wysihtml5.min.css">

Step two

Include the required javascript files inside the body before core template script inclusions..


  <script src="assets/plugins/bootstrap-wysihtml5/js/bootstrap-wysihtml5.min.js"></script>

Step three

Add the markup.


  <textarea name="" id="" cols="30" rows="10" data-plugin="wysihtml5" placeholder="Write something..."></textarea>

Step four

Apply the plugin.

Example

<script>
  $(document).ready(function() {
      $('[data-plugin="wysihtml5"]').wysihtml5();
  });
</script>

Datepicker

These are powered by Datepicker for Bootstrap jQuery plugin. Follow these steps to initialize a datepicker in your page

Please refer to Datepicker Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap-datepicker.min.css inside the head tag.


  <link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css">

Step two

Include the required javascript files inside the body before core template script inclusions..


  <script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

Step three

Add the markup.


  <div id="datepicker-component" class="input-group">
    <input type="text" class="form-control" placeholder="Datepicker" data-plugin="datepicker">
    <span class="input-group-addon bd-l-0"><i class="fa fa-calendar"></i></span>
  </div>

Step four

Apply the plugin.

Example

<script>
  $(document).ready(function() {
      $('[data-plugin="datepicker"]').datepicker();
  });
</script>

Selectbox

These are powered by Chosen jQuery plugin. Follow these steps to initialize a selectbox in your page

Please refer to Chosen Documentation to learn about plugin options

Step one

Include the stylesheet chosen.min.css inside the head tag.


  <link type="text/css" rel="stylesheet" href="assets/plugins/chosen/css/chosen.min.css">

Step two

Include the required javascript files inside the body before core template script inclusions..


  <script src="assets/plugins/chosen/js/chosen.min.js"></script>

Step three

Add the markup.


  <select class="form-control" data-plugin="selectbox">
      <option value=""></option>
      <option value="United States">United States</option>
      <option value="United Kingdom">United Kingdom</option>
      <option value="Afghanistan">Afghanistan</option>
      <option value="Albania">Albania</option>
      <option value="Algeria">Algeria</option>
      <option value="American Samoa">American Samoa</option>
      <option value="Andorra">Andorra</option>
      <option value="Angola">Angola</option>
      <option value="Anguilla">Anguilla</option>
      <option value="Antarctica">Antarctica</option>
      <option value="Antigua and Barbuda">Antigua and Barbuda</option> 
    </select>

Step four

Apply the plugin.

Example

<script>
  $(document).ready(function() {
      $('[data-plugin="selectbox"]').chosen();
  });
</script>

Dropzone

These are powered by Dropzone jQuery plugin. Follow these steps to initialize a dropzone in your page

Please refer to Dropzone Documentation to learn about plugin options

Step one

Include the stylesheet dropzone.min.css inside the head tag.


  <link type="text/css" rel="stylesheet" href="assets/plugins/dropzone/css/dropzone.min.css">

Step two

Include the required javascript files inside the body before core template script inclusions..


  <script src="assets/plugins/dropzone/js/dropzone.min.js"></script>

Step three

Add the markup.

 
  
  <form action="/file-upload" class="dropzone" data-plugin="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple> 
    </div>   
  </form>

Step four

Apply the plugin.

Example

<script>
  $(document).ready(function() {
      $('[data-plugin="dropzone"]').dropzone();
  });
</script>

Helpers

Helper css classes allow you to build your custom layout without touching any CSS code

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

Set margins - Available for all directions from 0 - 80 px stepping value 5px
Set padding - Available for all directions from 0 - 80 px stepping value 5px
Set border - Available for all sides, default pages border color
Border Radius - Option to set border radius, size sm / md / lg

Margins

You can add this helper class to any element in your HTML code to set Margins

First Prefix ( mg-*)	Second Prefix(mg-t/b/l/r-*)	Last Prefix(mg-t-$value)
mg for margin	t : top, b : bottom, l : left, r : right	5,10,15,20, ... 85

mg-0 or mg-none is equivalent to margin: 0

mg-35 is equivalent to margin: 35px

mg-t-0 is equivalent to margin-top: 0

mg-t-10 is equivalent to margin-top: 10px

mg-b-15 is equivalent to margin-bottom: 15px

mg-l-5 is equivalent to margin-left: 5px

mg-r-65 is equivalent to margin-right: 65px

Padding

You can add this helper class to any element in your HTML code to set Padding

First Prefix ( pd-*)	Second Prefix(pd-t/b/l/r-*)	Last Prefix(pd-t-$value)
pd for padding	t : top, b : bottom, l : left, r : right	5,10,15,20, ... 85

pd-0 or pd-none is equivalent to padding: 0

pd-35 is equivalent to padding: 35px

pd-t-0 is equivalent to padding-top: 0

pd-t-10 is equivalent to padding-top: 10px

pd-b-15 is equivalent to padding-bottom: 15px

pd-l-5 is equivalent to padding-left: 5px

pd-r-65 is equivalent to padding-right: 65px

Border

You can add this helper class to any element in your HTML code to set Border, border currently supports one pixel

First Prefix ( bd-*)	Second Prefix(bd-t/b/l/r/a-*)
bd for border	t : top, b : bottom, l : left, r : right, a : all

Border Color

Select on variety of pre-defined border colors

bd-transparent

bd-transparent-white

bd-gray

bd-white

bd-primary

bd-success

bd-info

bd-danger

bd-warning

Border Style

b-dashed - change the border style to 'dashed'

b-dotted - change the border style to 'dotted'

b-thick-(a/t/b/l/r) - change the border width to 2px

Example

This block has a bottom border

This block has a dotted bottom border

This block has a dashed bottom border

This block has a thick bottom border

 
<div class="bd-b bd-primary">This block has a bottom border</div> 
<div class="bd-b bd-danger bd-dotted">This block has a dotted bottom border</div> 
<div class="bd-b bd-primary bd-dashed">This block has a dashed bottom border</div> 
<div class="bd-b bd-thick-b bd-primary bd-dashed pd-y-10">This block has a thick bottom border</div>

Border Radius

Helper class to apply quick border radius

First Prefix ( bd-rd-*)	Second Prefix(bd-t/b/l/r-rd-*)	Last Prefix(bd-t-rd-*)
bd-rd for border radius	t : top, b : bottom, l : left, r : right	sm: small, md: medium, lg: large

bd-rd-none is equivalent to border-radius: 0

bd-rd-sm is equivalent to border-radius: 2px

bd-rd-md is equivalent to border-radius: 4px

bd-rd-lg is equivalent to border-radius: 6px

bd-t-l-sm is equivalent to border-top-left-radius: 2px

bd-t-r-md is equivalent to border-top-right-radius: 4px

bd-b-l-lg is equivalent to border-bottom-left-radius: 6px

bd-b-r-sm is equivalent to border-bottom-right-radius: 2px

Example

<div class="bg-primary bd-rd-sm"></div>
<div class="bg-primary bd-rd-md"></div>
<div class="bg-primary bd-rd-lg"></div>

Box Shadow

Helper class to apply quick border radius

First Prefix ( bx-sd-*)	Last Prefix(bx-sd-*)
bx-sd for box shadow	sm: small, md: medium, lg: large

Example

<div class="bx-sd-sm bd-a"></div>
<div class="bx-sd-md bd-a"></div>
<div class="bx-sd-lg bd-a"></div>

Contextual Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Example

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.


<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">....</p>
<p class="text-warning">..</p>
<p class="text-danger">....</p>
<p class="text-gray">..</p>
<p class="text-dark">....</p>
<p class="text-darker">......</p>
<p class="text-darkest">....</p>
<p class="text-link">..</p>
<p class="text-cyan">......</p>
<p class="text-blue">..</p>
<p class="text-darkblue">....</p>
<p class="text-navy">....</p>

Contextual Backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Example

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.


<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">....</p>
<p class="bg-warning">..</p>
<p class="bg-danger">....</p>
<p class="bg-gray">..</p>
<p class="bg-dark">....</p>
<p class="bg-darker">......</p>
<p class="bg-darkest">....</p>
<p class="bg-link">..</p>
<p class="bg-cyan">......</p>
<p class="bg-blue">..</p>
<p class="bg-darkblue">....</p>
<p class="bg-navy">....</p>

First Prefix ( fs-*)	Second Prefix(fs-sm/md/lg-*)	Last Prefix(fs-sm-$value)
bd-rd for border radius	sm: small, md: medium, lg: large	10,11,12,...,24,30,36

	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Class prefix	`.fs-sm-`	`.fs-md-`	`.fs-lg-`

Font Weights

You can choose on 3 variety of predefined font weights.

Example

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="light">....</p>
<p class="semi-bold">....</p>
<p class="bold">....</p>

Font Face

Apply heading font to paragraph or apply paragraph font to heading, you can switch it either way

Example

Howdy! I'm Open Sans

Ahoy! I'm Montserrat

<h4 class="font-base">Howdy! Im Open Sans</h4>
<p class="font-heading">Ahoy! Im Montserrat</p>

Text Alignment

Extend Bootstrap's text alignment classes for different alignment on desktop to mobile and vice versa.

First Prefix(text-sm/md/lg-*)	Last Prefix(text-sm-$value)
sm: small, md: medium, lg: large	left, center, right, justify

Options

See how aspects of the text alignment work across multiple devices with a handy table.

	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Class prefix	`.text-sm-`	`.text-md-`	`.text-lg-`

Example

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

Tablet - Desktop: Right aligned text. Mobile: Center aligned text.

Desktop: Center aligned text. Mobile: Left aligned text.

Large Screens: Left aligned text. Mobile - Desktop: Right aligned text.

<p class="text-left">....</p>
<p class="text-center">....</p>
<p class="text-right">....</p>
<p class="text-justify">....</p>
<p class="text-center text-sm-right">....</p>
<p class="text-md-center">....</p>
<p class="text-right text-lg-left">....</p>

Float Alignment

Extend Bootstrap's float alignment classes for different alignment on desktop to mobile and vice versa.

First Prefix(pull-sm/md/lg-*)	Last Prefix(pull-sm-$value)
sm: small, md: medium, lg: large	left, center, right, justify

Options

See how aspects of the float work across multiple devices with a handy table.

	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Class prefix	`.pull-sm-`	`.pull-md-`	`.pull-lg-`

Example

Float left aligned text.

Float right aligned text.

Float none aligned text.

Tablet - Desktop: Float right. Mobile: Float none.

Desktop: Float left. Mobile: Float none.

Large Screens: Float left aligned text. Mobile - Desktop: Float right aligned text.

<p class="pull-left">....</p>
<p class="pull-right">....</p>
<p class="pull-none">....</p>
<p class="pull-sm-right">....</p>
<p class="pull-md-left">....</p>
<p class="pull-left pull-lg-right">....</p>

Misc Classes

Class name	Description
`full-width`	Spans the element to have 100% width of the parent
`full-height`	Spans the element to have 100% height of the parent
`scrollable`	Adds `overflow-y:auto`
`center-margin`	Adds `margin-left:auto; margin-right:auto`. Useful when center aligning any div
`col-center`	Adds `float: none; margin-left:auto; margin-right:auto`. Useful when center aligning any `.col-*`
`inherit-size`	Inherits width and height from parent
`inherit-height`	Inherits only the height from parent
`hide`	Hides any element
`inline`	Adds `display:inline-block`
`block`	Adds `display:block`

Wired Documentation

Hand Crafted UI Framework on top of Bootstrap

Introductions

Ready to Go

Get Started

Wired

Source Code

CSS Preprocessors

Compiling CSS

Installing Gulp

Examples

Bootstrap template

Wired template

Sign-in page

Sign-up Page

404

Grid

Example

Options

Typography

Wired Heading

Wired Heading

Wired Heading

Wired Heading

Wired Heading

Wired Heading

Icons

Buttons

Colors

Example

Button animation

Example

Outline Buttons

Example

Rounded Buttons

Example

Box Buttons

Example

Offcanvas

Example

Direction

Example

Theme

Example

Breadcrumbs

Example

Dropdowns

Example

Progress bars

Example

Tabs

Option #1

Colors

Example

Option #2

Example

Tooltips

Four Directions

Examples

Colors

Examples

Notification

Step one

Step two

Step three

Example

Forms

Form Controls

Option

Example

Input File

Example

Outline Input File

Example

Checkbox controls

Example

State options

Example

Toggle controls

Example