A cool button for Call to Actions

For dark backgrounds

<a href="#" class="btn btn-primary btn-action" >Get Now!</a>
<a href="#" class="btn btn-info btn-action" >Get Now!</a>
<a href="#" class="btn btn-warning btn-action" >Get Now!</a>
<a href="#" class="btn btn-success btn-action" >Get Now!</a>
<a href="#" class="btn btn-action" >Get Now!</a>

For light backgrounds

<a href="#" class="btn btn-primary btn-action light-bg" >Get Now!</a>
<a href="#" class="btn btn-info btn-action light-bg" >Get Now!</a>
<a href="#" class="btn btn-warning btn-action light-bg" >Get Now!</a>
<a href="#" class="btn btn-success btn-action light-bg" >Get Now!</a>
<a href="#" class="btn btn-action light-bg" >Get Now!</a>

<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

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

Right aligned

<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

Create a grid of thumbnails and and add .gallery.effect-*

You have six different effects to choose

Effect 1

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Effect 2

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Effect 3

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Effect 4

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Effect 5

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Effect 6

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Gallery Carousel

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

Picture title

Take a look

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

Examples

File upload widget using input groups

File upload widget alone

Image upload widgets

Select image Change Remove

Flexible alignment

Select image Change Remove

Select image Change Remove

Learn more at the Jasny website

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

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>

Add a ribbon to any element

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 boxes in landscape by default

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

Dohn Joe

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

Dohn Joe

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

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>

Add class .date to your input

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

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

Learn more about Datepicker here

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-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb" id="cp3">
  <input type="text" class="form-control" value="" readonly="readonly" />
  <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
</div>

Using events to work with the 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

Usage

<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