Paper Dashboard PRO

Elements description

Buttons Live Demo

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette:


See Full Implementation
<button class="btn btn-default">Default</button>

<button class="btn btn-primary">Primary</button>

<button class="btn btn-info">Info</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-warning">Warning</button>

<button class="btn btn-danger">Danger</button>

Sizes

Buttons come in all needed sizes:

See Full Implementation
<button class="btn btn-primary btn-lg">Large</button>

<button class="btn btn-primary">Normal</button>

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

<button class="btn btn-primary btn-xs">Extra Small</button>

Styles

We added extra classes that help you better customise the look. You can use regular buttons, filled buttons or plain link buttons. Let's see some examples:

See Full Implementation
<button class="btn btn-primary">Default</button>

<button class="btn btn-primary btn-fill">Filled</button>

<button class="btn btn-primary btn-simple">Simple</button>

Button groups, toolbars, and disabled states all work like they are supposed to.

Social Buttons

An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default colour for every social network.
To use them, you have to add to your button the general class btn-social and the specific network, for example btn-twitter. All styles described above can be applied to social buttons (default, filled, simple).
We used the Themify social icons which you can find here.
Here are examples for all the social buttons:

See Full Implementation
<button class="btn btn-icon btn-twitter">
    <i class="ti-twitter"></i>
</button>
<button class="btn btn-icon btn-facebook">
    <i class="ti-facebook"> </i>
</button>
<button class="btn btn-icon btn-google">
    <i class="ti-google"> </i>
</button>
<button class="btn btn-icon btn-linkedin">
    <i class="ti-linkedin"></i>
</button>
<button class="btn btn-icon btn-pinterest">
    <i class="ti-pinterest"></i>
</button>
<button class="btn btn-icon btn-youtube">
    <i class="ti-youtube"> </i>
</button>
<button class="btn btn-icon btn-tumblr">
    <i class="ti-tumblr"> </i>
</button>
<button class="btn btn-icon btn-github">
    <i class="ti-github"></i>
</button>
<button class="btn btn-icon btn-dribbble">
    <i class="ti-dribbble"></i>
</button>
<button class="btn btn-icon btn-reddit">
    <i class="ti-reddit"></i>
</button>
<button class="btn btn-icon btn-instagram">
    <i class="ti-instagram"></i>
</button>

Checkboxes Live Demo

To use the custom checkboxes, you need to import a separate Javascript file called 'bootstrap-checkbox-radio-switch-tags.js'.

Usage can be done via Data Attributes: See example.

<label class="checkbox" for="checkbox1">

    <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">

    Unchecked

</label>

<label class="checkbox" for="checkbox2">

    <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>

    Checked

</label>

<label class="checkbox" for="checkbox3">

    <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled>

    Disabled unchecked

</label>

<label class="checkbox" for="checkbox4">

    <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" disabled checked>

    Disabled checked

</label>

Or you can call it via Javascript: See example.

$(':checkbox').checkbox();

Methods

  • .checkbox('toggle') is used to toggle the states between checked and unchecked.
  • .checkbox('check') sets the checkbox state to checked.
  • .checkbox('uncheck') sets the state to unchecked.
See coded example
$(':checkbox').checkbox('check');

Events

  • .on('toggle') gets activated when the checkbox state changes between checked and unchecked.
  • .on('change') the same as toggle.

See coded example
$(':checkbox').on('toggle', function() {
  // Do something
});

Radio Buttons Live Demo

To use the custom radio buttons, you need to import a separate Javascript file called 'bootstrap-checkbox-radio-switch-tags.js'.

Usage can be done via Data Attributes: See example.

<label class="radio">

    <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios1" value="option1">

    <i></i>Radio is off

</label>

<label class="radio">

    <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios2" value="option1" checked>

    <i></i>Radio is on

</label>

<label class="radio">

    <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios3" value="option2" disabled>

    <i></i>Disabled radio is off

</label>

<label class="radio">

    <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios4" value="option2" checked disabled>

    <i></i>Disabled radio is on

</label>

Or can be called via Javascript: See example.

$(':radio').radio();

Methods

  • .radio('check') sets the checkbox state to checked.
  • .radio('uncheck') sets the state to unchecked.
See coded example
$(':radio').radio('check');

Events

  • .on('toggle') gets activated when the checkbox state changes between checked and unchecked.
  • .on('change') the behaviour is the same as for the toggle, with the difference that the event is fired for each radio button that gets a change in its state.

See coded example
$(':radio').on('toggle', function() {
  // Do something
});

Switches Live Demo

If you want to use something more special than a checkbox, we recommend the switch. You can use it as plain, with text or with icons. The default version is the one with text (on and off states).


See Full Implementation
<div class="switch"
     data-on-label=""
     data-off-label="">
     <input type="checkbox" checked/>
</div>

<input type="checkbox" checked data-toggle="switch"/>
<input type="checkbox" data-toggle="switch" />

 <div class="switch"
  data-on-label="<i class='fa fa-check'></i>"
  data-off-label="<i class='fa fa-times'></i>">
  <input type="checkbox" checked/>
</div>
<div class="switch"
  data-on-label="<i class='fa fa-check'></i>"
  data-off-label="<i class='fa fa-times'></i>">
  <input type="checkbox"/>
</div>

Inputs Live Demo

We restyled the Bootstrap input to give it a flat, minimal look. You can use the classic look, different colours and states or input groups.

See full implementation
<div class="form-group">

    <input type="text" value="" placeholder="Input" class="form-control" />

</div>



<div class="form-group has-success">

    <input type="text" value="Success" class="form-control" />

</div>



<div class="form-group has-error has-feedback">

    <input type="text" value="Error" class="form-control" />

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>



<div class="input-group">

    <input type="text" value="Group Addon" class="form-control">

    <span class="input-group-addon"><i class="fa fa-group"></i></span>

</div>

Customisable Select Live Demo

There are 2 ways to use this input: as a normal select, in which case you need to specify the style as form-control, or as a button, in which case you have to specify the style as btn-{type}. You can also have multiple select options by using the multiple attribute on the select tag. Here are some coded examples.

See full implementation
<!-- simple select -->
<select name="cities" class="selectpicker" data-title="Single Select" data-style="btn-default btn-block" >
    <option value="id">Bahasa Indonesia</option>
    <option value="ms">Bahasa Melayu</option>
...
</select>

<!-- multiple select -->
<select multiple data-title="Multiple Select" name="currency" class="selectpicker" data-style="btn-info btn-fill btn-block" >
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
...
</select>

<!-- Bootstrap Select Picker -->
if($(".selectpicker").length != 0){
    $(".selectpicker").selectpicker();
}

Tags Live Demo

If you want to use tags, we now offer you 2 possibilities: simple tags and coloured tags, that you can use by adding the necessary colour class.

See full implementation
<input name="tagsinput" class="tagsinput" value="Minimal, Light, New, Friends" />
<input name="tagsinput" class="tagsinput tag-info" value="Minimal, Light, New, Friends" />

Textarea Live Demo

We added custom style for the textarea, so it looks similar to all other inputs.

See full implementation
<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea>