Dropper Extras

New Bootstrap 3 elements

Buttons Variants Input Variants Vertical Align Video Testimonials Effect Gallery Flickr Badge File Upload Input Mask Google Maps Ribbon About Datepicker Colorpicker Pricing Table Font Awesome Drops

Buttons New styles

Turn button styles applied with one extra class to a standard .btn

Button class="" Description
btn btn-default btn-turn-primary Standard gray button turns into primary color
btn btn-default btn-turn-info Standard gray button turns into info color
btn btn-default btn-turn-success Standard gray button turns into success color
btn btn-default btn-turn-warning Standard gray button turns into warning color
btn btn-default btn-turn-danger Standard gray button turns into danger color

Some buttons ready for social interaction.

Button class="" Description
btn btn-facebook Standard facebook button
btn btn-google Standard Twitter button
btn btn-google Standard Google button
btn btn-rss Standard Google button

Form Inputs variants

Provide class .input-flat to .form-control make inputs become flat.

@

.00

$ .00

Selects


Classics
Advanced

Just add class="selectpicker" to any select to change its style

Switch to a different style with the data-style attribute




Hilight Append

Provide an extra class .hilight-append to .input-group to hilight buttons on focus.

Vertical Align Grid

This feature allows you to align vertical a set a components using an optional grid to set the width.



I'm vertically aligned with my neighbour
I'm vertically aligned with my two neighbours


Markup

<div class="valign">
  <div class="cell-1-4 text-center text-error">
    <em class="fa fa-tint fa fa-4x"></em>
  </div>
  <div class="cell-3-4">
    I'm vertically aligned with my neighbour
  </div>
</div>

The grid support up to 6 fluid columns but you can customize it adding more custom classes

Some columns examples

One half .cell-1-2

One third .cell-1-3

Two third .cell-2-3

Three fourth .cell-3-4

Four fifth .cell-4-5

Responsive Video from Foundation 4

4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.

Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only — no extra padding for the controls. 

<div class="flex-video">
<iframe width="500" height="315" src="http://www.youtube.com/embed/c9MnSeYYtYY" frameborder="0" allowfullscreen>
</iframe>
</div>

Learn more about FlexVideo here

Testimonial

Lorem ipsum sit dolor ares ameit. This could be a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla.Vivamus nec sapien massa, a imperdiet diam.

John Doe — designer 

<div class='testimonial'>
  <blockquote>.....</blockquote>
  <p class='testimonial-footer'>
      <img data-src="holder.js/32x32" />
      <b>John Doe</b> — designer
  </p>
</div>

Right aligned

Lorem ipsum sit dolor ares ameit. This could be a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla.Vivamus nec sapien massa, a imperdiet diam.

John Doe — designer 

<div class='testimonial'>
  <blockquote>.....</blockquote>
  <p class='testimonial-footer pull-right'>
      <img data-src="holder.js/32x32" />
      <b>John Doe</b> — designer
  </p>
</div>

Testimonial Slider

Flickr Badge

Wrap the next flicker badge with your custom params inside .flickr-feed.clearfix

Markup

<div class="flickr-feed clearfix">
  <script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=random&size=s&layout=x&source=user&user=52617155@N08">
  </script>
</div>

URL params

count=8 Nunber of pictures to show size=s Size of pictures user=52617155@N08 Flickr User ID ( http://idgettr.com/ )

File upload

Examples

File upload widget using input groups

Select file Change Remove

File upload widget alone

Select file Change ×

Image upload widgets

Select image Change Remove

Flexible alignment

Select image Change Remove
Select image Change Remove

Learn more at the Jasny website

Important The file upload markup has been customized to match Bootstrap 3 classnames

Input mask

Example

Input masks can be used to force the user to enter data conform a specific format.

Unlike validation, the user can't enter any other key than the ones specified by the mask. 

<input type="text" class="form-control" data-mask="999-99-999-9999-9">

Learn more at the Jasny website

Google Maps

Use Google Maps directly from the data attribute

Add class .gmap to a DIV element and set a height

  • data-markers: set addresses separated by ;
  • data-zoom: set the map zoom level 
<div  class="gmap" 
      data-zoom="14"
      data-markers="Little Lonsdale St, Melbourne, Victoria 8011 Australia; 2 Elizabeth St, Melbourne, Victoria 3000 Australia" 
      style="height: 300px;"> 
</div>

Ribbon

Add a ribbon to any element

ribbon
ribbon

Use the data-text to set the ribbon text 

<div class="thumbnail has-ribbon" data-text="New Item">
<div class="thumbnail has-ribbon has-ribbon-right" data-text="Limited Offer">

About

About boxes in landscape by default

about

Dohn Joe

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

HTML
CSS
PHP
<div class="about" >
  <img src="people/picture"/>
  <div class="social">
      <a href="#"><em class="fa fa-facebook"></em></a>
      ...
  </div>
<h4 class="name">Dohn Joe</h4>
<p>....</p>
</div>

About boxes in portrait

about

Dohn Joe

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

about

Dohn Joe

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

about

Dohn Joe

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

<div class="about portrait" >
  <img src="people/picture" />
  <div class="social">
    <a href="#"><em class="fa fa-facebook"></em></a>
      ...
  </div>
  <div class="caption">
    <h4 class="name">Dohn Joe</h4>   
    <p>...</p>
  </div>
</div>

Datepicker

Add class .date to your input 


<div class="input-group date" id="dp-input1" data-date="01-01-2013" data-date-format="dd-mm-yyyy">
  <input class="span2" size="16" type="text">
  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>   

$('#dp-input1').datepicker();

Learn more about Datepicker here

Colorpicker

Attached to a field with hex format specified via options.

<input type="text" class="form-control" value="#8fff00" id="cp1" >

Attachet to a field with the rgba format specified via data tag. 

<input type="text" class="form-control" value="rgb(0,194,255,0.78)" id="cp2" data-color-format="rgba" >

As component.

<div class="input-group color" data-color="rgb(255, 146, 180)" data-color-format="rgb" id="cp3">
  <input type="text" class="form-control" value="" readonly="readonly" />
  <span class="input-group-addon"><i style="background-color: rgb(255, 146, 180)"></i></span>
</div>

Using events to work with the color.

Change background color 

<a href="#" class="btn btn-default btn-sm" id="cp4" data-color-format="hex" data-color="rgb(255, 255, 255)">Change...</a>

Learn more about Colorpicker here

Price Table


  • BASIC

    $12

    per month

  • 10GB Storage

  • 100GB Bandwidth

  • 10 domains

  • 20 email accounts

  • 5 Database

  • No support

  • Choose Plan

  • PROFESSIONAL

    $22

    per month


  • 100GB Storage

  • 500GB Bandwidth

  • 30 domains

  • 40 email accounts

  • 50 Database

  • 7x24 support


  • Choose Plan

  • PREMIUM

    $50

    per month

  • 500GB Storage

  • Unlimited Bandwidth

  • 50 domains

  • 50 email accounts

  • 100 Database

  • 7x24 support

  • Choose Plan

Font Awesome 4

Usage

.fa.fa-camera-retro

.fa.fa-camera-retro.fa-lg

.fa.fa-camera-retro.fa-2x

.fa.fa-camera-retro.fa-3x

.fa.fa-camera-retro.fa-4x 

<em class="fa fa-camera-retro"></em>
<em class="fa fa-camera-retro fa-lg"></em>
<em class="fa fa-camera-retro fa-2x"></em>
<em class="fa fa-camera-retro fa-3x"></em>
<em class="fa fa-camera-retro fa-4x"></em>

Learn more about FontAwesome here

Glossy drops

<div class="drop"></div>
<div class="drop drop-blue"></div>
<div class="drop drop-green"></div>
<div class="drop drop-orange"></div>
<div class="drop drop-pink"></div>
<div class="drop drop-purple"></div>


Get This Skin