Get
Sh
it
Done

Components Description

License

When you purchase an item from Creative Tim, you are actually purchasing a license to use that item. All our free items are under MIT license. All our premium items are covered by our Personal and Developer licenses. In order to understand the rights and restrictions that come with your purchase, please read the details from our Official License Page.

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:


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 can help you better customise the look. You can use regular buttons, filled buttons, rounded corners 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-round">Round</button>

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

Button groups, toolbars, and disabled state 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 color 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, ranging from filled to round to simple.
We used the Font Awesome social icons that you can find here.
Here is the example for all the social buttons with the filled style:

See Full Implementation
    <button class="btn btn-social btn-fill btn-twitter">

        <i class="fa fa-twitter"></i>

    </button>

    <button class="btn btn-social btn-fill btn-facebook">

        <i class="fa fa-facebook"> </i>

    </button>

    <button class="btn btn-social btn-fill btn-google">

        <i class="fa fa-google-plus"> </i>

    </button>

    <button class="btn btn-social btn-fill btn-linkedin">

        <i class="fa fa-linkedin"></i>

    </button>

    <button class="btn btn-social btn-fill btn-pinterest">

        <i class="fa fa-pinterest"></i>

    </button>

    <button class="btn btn-social btn-fill btn-youtube">

        <i class="fa fa-youtube-play"> </i>

    </button>

    <button class="btn btn-social btn-fill btn-tumblr">

        <i class="fa fa-tumblr"> </i>

    </button>

    <button class="btn btn-social btn-fill btn-github">

        <i class="fa fa-github"></i>

    </button>

    <button class="btn btn-social btn-fill btn-behance">

        <i class="fa fa-behance"></i>

    </button>

    <button class="btn btn-social btn-fill btn-dribbble">

        <i class="fa fa-dribbble"></i>

    </button>

    <button class="btn btn-social btn-fill btn-reddit">

        <i class="fa fa-reddit"></i>

    </button>

    <button class="btn btn-social btn-fill btn-stumbleupon">

        <i class="fa fa-stumbleupon"></i>

    </button>
    

Morphing Buttons

If you want a special effect for the buttons in your forms, we have created a special class of buttons called morphing buttons.
The buttons have 2 states: loading and result. The loading state starts after the click action: the buttons transforms itself into a loading circle (presumably while the call to the server is being made). The button remains in the loading state until the second state is invoked. To call the result state, you should call "morphingButton()" by Javascript with the following parameters: icon (which will be displayed in the result) and state (that can take the values: {info | success | warning | error}).
You can set the color for the loading circle with the following classes “data-rotation-color=”{ azure | green | orange | red}”.

See Full Implementation
    <!-- HMTL -->

    <button class="btn btn-round btn-info btn-lg" data-toggle="morphing" data-rotation-color="azure">Success Submit</button>



    <!-- OR -->

    <button class="btn btn-round btn-info btn-lg" id="idButton" data-rotation-color="azure">Success Submit</button>

    $('#idButton').morphingButton();



    $('#successBtn').morphingButton({

            action: 'setState',

            icon: 'fa-check',

            state: 'success'

        });
    

Checkboxes

To use the custom checkboxes, you need to import a separate Javascript file called 'checkbox.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 can be called via Javascript: See example.

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

We added more classes to provide you with choices

See Full Implementation
    <label class="checkbox checkbox-blue" for="checkbox1">

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

        Blue

    </label>

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

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

        Azure

    </label>

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

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

        Green

    </label>

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

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

        Orange

    </label>

    <label class="checkbox checkbox-red" for="checkbox5">

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

        Red

    </label>
    

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

To use the custom radio buttons, you need to import a separate Javascript file called 'radio.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();
    

You can choose between different colors:

See Full Implementation
    <label class="radio radio-blue">

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

        <i></i>Blue

    </label>

    <label class="radio radio-azure">

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

        <i></i>Azure

    </label>

    <label class="radio radio-green">

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

        <i></i>Green

    </label>

    <label class="radio radio-orange">

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

        <i></i>Orange

    </label>

    <label class="radio radio-red">

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

        <i></i>Red

    </label>
    

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 as the toggle, with the difference that the event is fired for each radio button that gets a state change.

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

Switches

If you want to use something more special than a checkbox, we recomment the switch. You can use it with both text and with icons. For extra customisation we added color classes.
For the original documentation, please go here: Larentis Switch.


See Full Implementation
    <input type="checkbox" checked data-toggle="switch" class="ct-green"/>

    <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

We restyled the Bootstrap input to give it a more flat, minimal look. You can use the classic look, different colors 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="fa fa-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>
    

Customizable Select

There are 2 ways to use them: as normal select, in which case you need to specify the style as "form-control", or as button, for which you have to specify the style as "btn-{type}". You can also set the "multiple" attribute if you wan to have multiple selects. Please check the original documentation.

See full implementation
    <select name="huge" class="selectpicker" data-style="form-control">
        <option disabled selected> Choose city</option>
        <option value="1">Paris </option>
        <option value="1">Bucharest</option>
    </select>


    <select name="huge" class="selectpicker" data-style="btn-info btn-fill btn-block">
        <option disabled selected> Choose city</option>
        <option value="1">Paris </option>
        <option value="1">Bucharest</option>
    </select>

    

Tags

If you want to use tags, we now offer you 3 possibilities: simple tags, colored tags that you can use by adding the necessary color class and filled tags, resulted by using the "tag-fill" class. You can also add an external URL for autocomplete feature, or you can just add a couple of words inside javascript. More details about tags here: jQuery Tags Input

See full implementation
	<!-- Markup Regular Tags -->
	<input name="tagsinput" class="tagsinput tag-{blue} tag-fill" value="Minimal, Nice, Good"/>

	<!-- Markup Autocomplete Tags -->
	<input name="tagsinputautocomplete" class="tagsinput-autocomplete tag-{blue} tag-fill" value="Ale"/>

	<!-- Javascript -->
	$(".tagsinput-autocomplete").tagsInput({
        	autocomplete_url: [{"value":"Alien","id":1},{"value":"Alex","id":2},{"value":"Alexander","id":3},{"value":"Alejandro","id":4}]
        	//autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete
	});
		    

Textarea

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>
    

Subscription Area

Set up a space on your page to gather subscription by adding this special area. It contains the email input and a call to action ( you can use any variation of button you see fit). The subscription area comes with 3 styles: white (class "subscribe-line"), black (class "subscribe-line-black") and transparent (class "subscribe-line-transparent"), which looks best when you use a background image and a black layer over it.
See the examples and implementation here.

Sharing Area

Promote sharing in your site by adding the kit's custom social lines. You can add your own text, the buttons are the social ones (you can find them in the Social Buttons section). There are 2 variations for the social line: white (by using the class "social line" ) and black (by using the class "social-line-black").
See more examples and implementation here.

Footers

There are 4 types of color you can choose for footers: white (class: "footer"), light grey (class: "footer-default"), black (class: "footer-black") and transparent (class: "footer-transparent"). You can choose between 2 sizes: normal (class: "footer") and big (class: "footer-big").
See more examples and implementation here.

Big footers also support social area. For items inside "social-area": if they do not have a special social class, then they will appear grey for footers that are lightly colored and white for footers that are darkly colored. You can also use all variations of "btn-social" for colors and all the styles for buttons.

See Example of Social Area inside Footer

Pagination

We took the Bootstrap pagination elements and customised them to fit the overall theme. We also added a special class called 'no-border', which dies what its name says and improves the overall clean look.

Besides the classic look, we also added the color classes to offer more customisation.

See full implementation

Progress Bars

The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean and minimal.

60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
See full implementation
    <div class="progress">

      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">

        <span class="sr-only">60% Complete</span>

      </div>

    </div>

    <div class="progress">

      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

        <span class="sr-only">60% Complete</span>

      </div>

    </div>

    <div class="progress">

      <div class="progress-bar progress-bar-success" style="width: 35%">

        <span class="sr-only">35% Complete (success)</span>

      </div>

      <div class="progress-bar progress-bar-warning" style="width: 20%">

        <span class="sr-only">20% Complete (warning)</span>

      </div>

      <div class="progress-bar progress-bar-danger" style="width: 10%">

        <span class="sr-only">10% Complete (danger)</span>

      </div>

    </div>
    

Sliders

We restyled jQuery UI slider, while keeping the design consistent.


See Markup and Javascript
    <!-- Markup -->
    <div id="slider-default" class="slider-info"></div>

    <div id="slider-range" class="slider-success"></div>

    <!-- Javascript -->
    $( "#slider-range" ).slider({

    	range: true,
    	min: 0,
    	max: 500,
    	values: [ 75, 300 ],

    });

    $( "#slider-default" ).slider({

    		value: 70,
    		orientation: "horizontal",
    		range: "min",
    		animate: true

    });
    

Labels

We restyled the default options for labels and we added the filled class, that can be used in any combination.

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger
See Full Implementation
    <span class="label label-default">Default</span>

    <span class="label label-primary">Primary</span>

    <span class="label label-success">Success</span>

    <span class="label label-info">Info</span>

    <span class="label label-warning">Warning</span>

    <span class="label label-danger">Danger</span>



    <!-- Filled -->



    <span class="label label-default label-fill">Default</span>

    <span class="label label-primary label-fill">Primary</span>

    <span class="label label-success label-fill">Success</span>

    <span class="label label-info label-fill">Info</span>

    <span class="label label-warning label-fill">Warning</span>

    <span class="label label-danger label-fill">Danger</span>
    

Description Area

We restyled the classic description by tabs. We offer 2 possbility to style the navigation part of the description area: with text( using the class "nav-text") and with icons (using the class "nav-icons"). Besides the default order that comes horizontal, we added a vertical alignment possibility, reachable by the use of the class “nav-stacked”. You can style it with any of the colors that come with the kit, by using the class “nav-{color}”.

Here is an example of the stacked, text option.

Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.

It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.

The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.

There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.

It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.

Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.

From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.

It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.

Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.

It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.

See Full Implementation
    <div class="row">

        <div class="col-md-3">

             <ul class="nav nav-text nav-stacked" role="tablist">

                  <li class="active">

                    <a href="#info" role="tab" data-toggle="tab">

                         Info

                    </a>

                  </li>

                  <li>

                    <a href="#description" role="tab" data-toggle="tab">

                         Description

                    </a>

                  </li>

                  <li>

                    <a href="#concept" role="tab" data-toggle="tab">

                         Concept

                    </a>

                  </li>

                  <li>

                   <a href="#support" role="tab" data-toggle="tab">

                        Support

                   </a>

                  </li>

    <!--                                   <li class="divider"></li> -->

                  <hr>

                  <li>

                   <a href="#extra" role="tab" data-toggle="tab">

                        Extra

                   </a>

                  </li>

                </ul>

        </div>

        <div class="col-md-9">

                <!-- Tab panes -->

                <div class="tab-content">

                    <div class="tab-pane active" id="info">

                         <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p>

                         <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>

                      </div>

                      <div class="tab-pane" id="description">

                        <p>The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design. </p>

                        <p>There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.</p>

                     </div>

                      <div class="tab-pane" id="concept">

                         <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>

                         <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. </p>

                      </div>

                      <div class="tab-pane" id="support">

                        <p>From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.</p>

                         <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>

                      </div>

                      <div class="tab-pane" id="extra">

                         <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. </p>

                         <p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>

                      </div>

                 </div>

        </div>

    </div>
    

Here is an example with icons, aligned horizontally.

See Full Implementation
    <div class="row">

    <div class="col-md-3">

        <ul class="nav nav-stacked nav-icons" role="tablist">

          <li class="active">

            <a href="#stacked-description-logo" role="tab" data-toggle="tab">

                 <i class="fa fa-info-circle"></i><br>

                 Description

            </a>

          </li>

          <li>

            <a href="#stacked-legal-logo" role="tab" data-toggle="tab">

                <i class="fa fa-legal"></i><br>

                Legal Info

            </a>

          </li>

          <li>

           <a href="#stacked-help-logo" role="tab" data-toggle="tab">

                <i class="fa fa-life-ring"></i><br>

                Help Center

           </a>

          </li>

        </ul>

    </div>

    <div class="col-md-9">

         <!-- Tab panes -->

        <div class="tab-content">

          <div class="tab-pane active" id="stacked-description-logo">

            <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p>

            <p>The first thing you notice when you hold the phone is how great it feels in your hand. There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.</p>



         </div>

          <div class="tab-pane" id="stacked-legal-logo">

            <p>The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.</p>

            <p>Larger, yet dramatically thinner.It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>

          </div>

          <div class="tab-pane" id="stacked-help-logo">

            <p>From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.</p>

            <p>Larger, yet dramatically thinner.

            </p>

          </div>

        </div>

    </div>

    </div>
    

You can see more examples here.

Info Area

Our information areas are made of created using rounded corners squares with gradients and using icons (iOS7 Stroke, Font Awesome or custom). The default color for the gradient is grey, and you can all others colors by using the corresponding class “icon-{blue | azure | green| orange | red | purple | pink | black }”.
The default size for the areas is 64x64px. If you want the smaller version of 32x32px, you can use the “icon-sm” class.
For an horizontal alignment use the custom class "icon-horizontal". See more illustrative examples below:

Made with Love

Really fast implementation

Fast Delivery

Create really awesome projects.

Find more
See Full Implementation
    <!-- example with regular info -->

     <div class="col-md-4">

           <div class="info">

                <div class="icon icon-pink">

                    <i class="pe-7s-like"></i>

                </div>

                <div class="description">

                    <h3> Made with Love </h3>

                    <p>Really fast implementation</p>

                </div>

           </div>

        </div>

     <!-- example with info horizontal and small icon -->

    <div class="col-md-5">

       <div class="info info-horizontal">

            <div class="icon icon-blue icon-sm">

                <i class="fa fa-shopping-cart"></i>

            </div>

            <div class="description">

                <h4> Fast Delivery </h4>

                <p>Create really awesome projects.</p>

                <a href="javascript: void(0);">Find more</a>

            </div>

       </div>

     </div>
    

Tables

All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added a shopping cart table, that gives you more customisation. With the shopping cart table you can use the classes “td-name” for a cell that contains names and “td-number” for numbers. All tables have to possibility to add action cells for every row. If you add the class “td-actions” for the cell that has the actions, when you will hover over its row, it will become more intense.
If you want to make the most out of the Get Shit Done Pro tables, you should check out the next examples.

Simple Table with Actions

# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 € 99,225
2 John Doe Design 2012 € 89,241
3 Alex Mike Design 2010 € 92,144
4 Mike Monday Marketing 2013 € 49,990
5 Paul Dickens Communication 2014 € 69,201
See Full Implementation
    <div class="table-responsive">

    <table class="table">

        <thead>

            <tr>

                <th class="text-center">#</th>

                <th>Name</th>

                <th>Job Position</th>

                <th>Since</th>

                <th class="text-right">Salary</th>

                <th class="text-right">Actions</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td class="text-center">1</td>

                <td>Andrew Mike</td>

                <td>Develop</td>

                <td>2013</td>

                <td class="text-right">&euro; 99,225</td>

                <td class="td-actions text-right">

                    <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">

                        <i class="fa fa-user"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">

                        <i class="fa fa-edit"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">

                        <i class="fa fa-times"></i>

                    </button>

                </td>

            </tr>

            <tr>



                <td class="text-center">2</td>

                <td>John Doe</td>

                <td>Design</td>

                <td>2012</td>

                <td class="text-right">&euro; 89,241</td>

                <td class="td-actions text-right">

                    <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">

                        <i class="fa fa-user"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">

                        <i class="fa fa-edit"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">

                        <i class="fa fa-times"></i>

                    </button>

                </td>

            </tr>

            <tr>

                <td class="text-center">3</td>

                <td>Alex Mike</td>

                <td>Design</td>

                <td>2010</td>

                <td class="text-right">&euro; 92,144</td>

                <td class="td-actions text-right">

                    <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">

                        <i class="fa fa-user"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">

                        <i class="fa fa-edit"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">

                        <i class="fa fa-times"></i>

                    </button>

                </td>

            </tr>

            <tr>

                <td class="text-center">4</td>

                <td>Mike Monday</td>

                <td>Marketing</td>

                <td>2013</td>

                <td class="text-right">&euro; 49,990</td>

                <td class="td-actions text-right">

                    <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">

                        <i class="fa fa-user"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">

                        <i class="fa fa-edit"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">

                        <i class="fa fa-times"></i>

                    </button>

                </td>

            </tr>

            <tr>

                <td class="text-center">5</td>

                <td>Paul Dickens</td>

                <td>Communication</td>

                <td>2014</td>

                <td class="text-right">&euro; 69,201</td>

                <td class="td-actions text-right">

                    <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">

                        <i class="fa fa-user"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">

                        <i class="fa fa-edit"></i>

                    </button>

                    <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">

                        <i class="fa fa-times"></i>

                    </button>

                </td>

            </tr>

        </tbody>

    </table>

    </div>
    

Striped Table with Checkboxes

# Product Name Type Qty Price Amount
1 Moleskine Agenda Office 25 € 49 € 1,225
2 Stabilo Pen Office 30 € 10 € 300
3 A4 Paper Pack Office 50 € 10.99 € 109
4 Apple iPad Meeting 10 € 499.00 € 4,990
5 Apple iPhone Communication 10 € 599.00 € 5,999
Total 12,999
See Full Implementation
    <div class="table-responsive">

    <table class="table table-striped">

        <thead>

            <tr>

                <th class="text-center">#</th>

                <th></th>

                <th>Product Name</th>

                <th>Type</th>

                <th>Qty</th>

                <th class="text-right">Price</th>

                <th class="text-right">Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td class="text-center">1</td>

                <td>

                    <label class="checkbox">

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

                    </label>

                </td>

                <td>Moleskine Agenda</td>

                <td>Office</td>

                <td>25</td>

                <td class="text-right">&euro; 49</td>

                <td class="text-right">&euro; 1,225</td>

            </tr>

            <tr>



                <td class="text-center">2</td>

                <td>

                    <label class="checkbox">

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

                    </label>

                </td>

                <td>Stabilo Pen</td>

                <td>Office</td>

                <td>30</td>

                <td class="text-right">&euro; 10</td>

                <td class="text-right">&euro; 300</td>

            </tr>

            <tr>



                <td class="text-center">3</td>

                <td>

                    <label class="checkbox">

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

                    </label>

                </td>

                <td>A4 Paper Pack</td>

                <td>Office</td>

                <td>50</td>

                <td class="text-right">&euro; 10.99</td>

                <td class="text-right">&euro; 109</td>

            </tr>

            <tr>



                <td class="text-center">4</td>

                <td>

                    <label class="checkbox">

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

                    </label>

                </td>

                <td>Apple iPad</td>

                <td>Meeting</td>

                <td>10</td>

                <td class="text-right">&euro; 499.00</td>

                <td class="text-right">&euro; 4,990</td>

            </tr>

            <tr>



                <td class="text-center">5</td>

                <td>

                    <label class="checkbox">

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

                    </label>

                </td>

                <td>Apple iPhone</td>

                <td>Communication</td>

                <td>10</td>

                <td class="text-right">&euro; 599.00</td>

                <td class="text-right">&euro; 5,999</td>

            </tr>

            <tr>

                <td colspan="5"></td>

                <td class="td-total">

                    Total

                </td>

                <td class="td-price">

                    <small>&euro;</small>12,999

                </td>

            </tr>

        </tbody>

    </table>

    </div>
    

Shopping Cart Table

Product Description Price Qty Amount
...
Moleskine Agenda Meeting Notes

Most beautiful agenda for the office.

49 x25 1,225
Total 1,225
See Full Implementation
    <div class="table-responsive">

    <table class="table table-shopping">

        <thead>

            <tr>

                <th class="text-center"></th>

                <th >Product</th>

                <th class="th-description">Description</th>

                <th class="text-right">Price</th>

                <th class="text-right">Qty</th>

                <th class="text-right">Amount</th>

                <th></th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    <div class="img-container">

                        <img src="assets/img/shopping.jpg" alt="...">

                    </div>

                </td>

                <td class="td-name">

                    Moleskine Agenda

                </td>

                <td>

                    <b>Meeting Notes</b>

                    <p>

                    Most beautiful agenda for the office.</p>

                </td>



                <td class="td-number">

                    <small>&euro;</small>49

                </td>

                <td class="td-number">

                    <small>x</small>25

                </td>

                <td class="td-number">

                    <small>&euro;</small>1,225

                </td>

                <td class="td-actions">

                    <button type="button" rel="tooltip" data-placement="left" title="Aprove" class="btn btn-info btn-simple btn-icon">

                        <i class="fa fa-check"></i>

                    </button>

                    <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-danger btn-simple btn-icon ">

                        <i class="fa fa-times"></i>

                    </button>

                    <button type="button" rel="tooltip" data-placement="left" title="Wishlist" class="btn btn-default btn-simple btn-icon">

                        <i class="fa fa-heart-o"></i>

                    </button>

                </td>

            </tr>

            <tr>

                <td colspan="2"></td>

                <td></td>

                <td class="td-total">

                   Total

                </td>

                <td class="td-price">

                    <small>&euro;</small>1,225

                </td>

                <td> <button type="button" class="btn btn-info btn-fill btn-l">Complete Purchase <i class="fa fa-chevron-right"></i></button></td>



                <td></td>

            </tr>

        </tbody>

    </table>

        </div>
    

Comments Area

For the comments section, we used the Bootstrap classes for media, to which we added the "media-post" class. You can use the former class for the area in which a user can post a comment.
All comments should be placed in the class "media-area". There is also a class for smaller comments area called “media-area-small”; use it for a tighter space, it will shrink the text and pictures.

You can see more examples here.

Cards

There are a lot of beautiful cards! They are one of the best way to organise your information. We went over board with possibilities and we recommended finding the right fit for your product. The general class for a card is called "card". All cards have also a plain version, without the background and shadow, and you can reach it by using the "card-plain" class. IF you want them structured horizontally, just add the “card-horizontal” class.

Blog Cards

Blog cards have 3 areas: the image area defined by the "image" class and the content area with the class "content" on the bottom.
The image part of the card can take filters, that show on the hover action. We recommend adding specific action for the object the cards defines here. The filters come with 7 options, black being the default one. To choose the color, use of the “filter-{color = black[default], white,blue,azure,green,orange,red}” options.
If you have multiple cards, with different stories, it is easy to put them into categories and identify them more easily by using the following: <p class= “category”></p> (which represents the category). The category part of the content can contain icons, text or both on all color options.
One way to organize the content area is by having a title , for which you should use the "title" class, and a description, class "description".
If you want a footer for your card, we recommend placing it inside the content area, with the "footer" class. The footer is made of the stats (using the class "stats") and author (class "author"). Stats can have icons or icons and text. The author part can have icon and name, or picture and name.
See all possibilities in detail here.

See Full Implementation
    <div class="card">

        <div class="image">

            <img src="assets/img/thumb.jpg&fit=max&fm=jpg&auto=format&s=5c4d815f60933514c19eda5655f240eb" alt="..."/>

            <div class="filter filter-white">

                <button type="button" class="btn btn-default btn-simple">

                    <i class="fa fa-image"></i> Preview

                </button>

                <button type="button" class="btn btn-success btn-simple">

                    <i class="fa fa-check"></i> Publish

                </button>

                <button type="button" class="btn btn-danger btn-simple">

                    <i class="fa fa-times"></i> Delete

                </button>

            </div>

        </div>

        <div class="content">

            <p class="category">Latest from <a href="">Best Stories</a></p>

            <a href="#">

                <h4 class="title">Get Shit Done Kit PRO, the most wanted bootstrap kit is here </h4>

            </a>

            <a href="#">

                <p class="description">Edgerank completely fails to have the effect it was originally designed for nice product. This will be a really interesting post about Facebook's biggest mistake yet...</p>

            </a>

             <div class="footer">

                <div class="author">

                    <a class="card-link" href="#">

                         <img src="assets/img/default-avatar.png" alt="..." class="avatar">

                         <span> Alex Paduraru</span>

                    </a>

                </div>

                <div class="stats pull-right">

                     <a href="#">

                        <i class="fa fa-comments"></i> 89

                     </a>

                </div>

                <div class="stats pull-right">

                    <a href="#">

                        <i class="fa fa-heart"></i> 341

                    </a>

                </div>

            </div>

        </div>

    </div>
    

Profile Cards

The profile cards are defined by the "card-profile" class. They have the same image and content structure as the blog card. You can use your own image for the "image" area, or you can go with the default white one. If you do not want your card to be differentiated from the background, you can use the "card-plain" class.
To see more examples, please go here.

...

Bucharest, Romania
hello@creative-tim.com
Since 2013


See Full Implementation
    <div class="card card-user">

        <div class="image">

             <img src="assets/img/thumb.jpg" alt="..."/>

        </div>

        <div class="content">

            <div class="author">

            	<a href="#">

                <img class="avatar" src="assets/img/default-avatar.png" alt="..."/>


                  <h4 class="title">Creative Tim <br />

                     <small>Designer</small>

                  </h4>

                </a>

            </div>

            <p class="description text-center">

                <i class="fa fa-map-marker text-muted"></i> Bucharest, Romania <br>

                <i class="fa fa-envelope-o text-muted"></i> hello@creative-tim.com <br>

                <i class="fa fa-clock-o text-muted"></i> Since 2013

            </p>

        </div>

        <hr>

        <div class="text-center">

            <button href="#" class="btn btn-social btn-simple"><i class="fa fa-facebook-square"></i></button>

            <button href="#" class="btn btn-social btn-simple"><i class="fa fa-twitter"></i></button>

            <button href="#" class="btn btn-social btn-simple"><i class="fa fa-google-plus-square"></i></button>



        </div>

    </div> <!-- end card -->
    

Product Cards

The class that defines the product cards is called "card-product". It has the same structure of image and content, like the ones described above.
Inside the "image" class you can also use a carousel for product bundles.
We added a class for price called "price". If you wish to show a special promotion, you can use the classes "price-old" and "price-new".
We added a new class of buttons for this cards, called "btn-hover". You should use it if you wish for the button to appear on the hover action for the card. The button that appears on hover can best be used for actions such as “Favourite, Wishlist, View Later”.
To see more examples, please go here.

Burberry Collection

Leaf-Print Cotton, Silk-Blend Shirt and Cashmere-Blend Blanket

See Full Implementation
    <div class="card card-product">

        <div class="image">

            <div id="card-product-carousel" class="carousel slide" data-ride="carousel">

              <!-- Wrapper for slides -->

              <div class="carousel-inner">

                <div class="item active">

                  <img src="assets/img/product.jpg" alt="">

                </div>

                <div class="item">

                  <img src="assets/img/product.jpg" alt="">

                </div>

                <div class="item">

                  <img src="assets/img/product.jpg" alt="">

                </div>

              </div>



              <!-- Controls -->

              <a class="left carousel-control" href="#card-product-carousel" data-slide="prev">

                <span class="fa fa-angle-left"></span>

              </a>

              <a class="right carousel-control" href="#card-product-carousel" data-slide="next">

                <span class="fa fa-angle-right"></span>

              </a>

            </div>

        </div>

        <div class="content">

            <a href="#">

                <h4 class="title">Burberry Collection</h4>

            </a>

            <p class="description">

               Leaf-Print Cotton, Silk-Blend Shirt and Cashmere-Blend Blanket

            </p>

            <div class="footer">

                <span class="price price-old">&euro; 549</span>

                <span class="price price-new">&euro; 449</span>

                <button class="btn btn-default btn-fill pull-right btn-xs btn-hover">

                    <i class="fa fa-star"></i>

                </button>

            </div>

        </div>

    </div> <!-- end card -->
    

Refine Section

Information shown on cards is most likely homogenous and you should be able to provide the user an easy way to search and filter. To do this, we provide a refine card. The class for it is called "card-refine". Due to large number of categories, this area can get pretty long, so we also created a class called “panel-scroll” to make areas scrollable.

Refine

€ 100 € 850
See Full Implementation

     <div class="card card-refine">

            <div class="header">

                <h4 class="title">Refine

                    <button class="btn btn-default btn-xs btn pull-right btn-simple" rel="tooltip" title="Reset Filter">

                        <i class="fa fa-refresh"></i>

                    </button>

                 </h4>

            </div>

            <div class="content">

                  <div class="panel-group" id="accordion">



                  <div class="panel panel-default">

                    <div class="panel-heading">

                      <h6 class="panel-title">

                        <a data-toggle="collapse" href="#refinePrice">

                          Price Range

                          <i class="fa fa-caret-up pull-right"></i>

                        </a>

                      </h6>

                    </div>

                    <div id="refinePrice" class="panel-collapse collapse in">

                      <div class="panel-body">

                         <span class="price price-left">&euro; 100</span>

                         <span class="price price-right">&euro; 850</span>

                         <div class="clearfix"></div>

                         <div id="refine-price-range" class="slider slider-info"></div>

                      </div>

                    </div>

                  </div>



                  <div class="panel panel-default">

                    <div class="panel-heading">

                      <h6 class="panel-title">

                        <a data-toggle="collapse" href="#refineClothing" class="collapsed">

                          Clothing

                          <i class="fa fa-caret-up pull-right"></i>

                        </a>

                      </h6>

                    </div>

                    <div id="refineClothing" class="panel-collapse collapse">

                      <div class="panel-body">

                         <label class="checkbox">

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

                            Blazers

                          </label>

                          <label class="checkbox">

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

                            Casual Shirts

                          </label>

                          <label class="checkbox">

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

                            Formal Shirts

                          </label>

                          <label class="checkbox">

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

                            Jeans

                          </label>

                          <label class="checkbox">

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

                            Polos

                          </label>

                          <label class="checkbox">

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

                            Pyjamas

                          </label>

                          <label class="checkbox">

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

                            Shorts

                          </label>

                          <label class="checkbox">

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

                            Trousers

                          </label>

                      </div>

                    </div>

                  </div>





                   <div class="panel panel-default">

                    <div class="panel-heading">

                      <h6 class="panel-title">

                        <a data-toggle="collapse" href="#refineDesigner">

                          Designer

                          <i class="fa fa-caret-up pull-right"></i>

                        </a>

                      </h6>

                    </div>

                    <div id="refineDesigner" class="panel-collapse collapse in">

                      <div class="panel-body panel-scroll">

                         <label class="checkbox">

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

                            All

                          </label>

                          <label class="checkbox">

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

                            Acne Studio

                          </label>

                          <label class="checkbox">

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

                            Alex Mill

                          </label>

                          <label class="checkbox">

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

                            Alexander McQueen

                          </label>

                          <label class="checkbox">

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

                            Alfred Dunhill

                          </label>

                          <label class="checkbox">

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

                            AMI

                          </label>

                          <label class="checkbox">

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

                            Berena

                          </label>

                          <label class="checkbox">

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

                            Berluti

                          </label>

                          <label class="checkbox">

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

                            Burberry Prorsum

                          </label>

                          <label class="checkbox">

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

                            Calvin Klein

                          </label>

                          <label class="checkbox">

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

                            Canali

                          </label>

                          <label class="checkbox">

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

                            Club Monaco

                          </label>

                          <label class="checkbox">

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

                            Dolce & Gabbana

                          </label>

                          <label class="checkbox">

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

                            Gucci

                          </label>

                          <label class="checkbox">

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

                            Kolor

                          </label>

                          <label class="checkbox">

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

                            Lanvin

                          </label>

                          <label class="checkbox">

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

                            Loro Piana

                          </label>

                          <label class="checkbox">

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

                            Massimo Alba

                          </label>

                      </div>

                    </div>

                  </div><!-- end panel -->



                  <div class="panel panel-default">

                    <div class="panel-heading">

                      <h6 class="panel-title">

                        <a data-toggle="collapse" href="#refineColour" class="collapsed">

                          Colour

                          <i class="fa fa-caret-up pull-right"></i>

                        </a>

                      </h6>

                    </div>

                    <div id="refineColour" class="panel-collapse collapse">

                      <div class="panel-body">

                         <label class="checkbox">

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

                            All

                          </label>

                          <label class="checkbox">

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

                            Black

                          </label>

                          <label class="checkbox">

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

                            Blue

                          </label>

                          <label class="checkbox">

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

                            Brown

                          </label>

                          <label class="checkbox">

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

                            Gray

                          </label>

                          <label class="checkbox">

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

                            Green

                          </label>

                          <label class="checkbox">

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

                            Neutrals

                          </label>

                          <label class="checkbox">

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

                            Purple

                          </label>

                      </div>

                    </div>

                  </div> <!-- end panel -->



                </div>

            </div>

        </div> <!-- end card -->
    

Price Cards

We created a special set of classes designed to help you create your price options in your website. If you want to describe the options on every card with a list, please the use the class “list-lines”.
If you want to see examples, please go here. Here is a fully coded version of a price card:

Photoshop Elements

39 /mo

  • 10,000 Messages
  • Unlimited Combinations
  • Too much Users
  • Free Updates
See Full Implementation
    <div class="card card-price">

        <div class="content">

            <h6 class="category">Photoshop Elements</h6>

            <h1 class="price">

                <small>&euro;</small>39 <small>/mo</small>

            </h1>



            <ul class="list-unstyled list-lines">

                <li>

                    <i class="fa fa-comments"></i> <b>10,000</b> Messages

                </li>

                <li>

                    <i class="fa fa-magic"></i> <b>Unlimited</b> Combinations

                </li>

                <li>

                    <i class="fa fa-male"></i> <b>Too much</b> Users

                </li>

                <li>

                    <i class="fa fa-level-up"></i> <b>Free</b> Updates

                </li>

            </ul>

        </div>

        <div class="footer">

           <button type="button" class="btn btn-info btn-fill btn-block">Get this Package</button>

        </div>

    </div> <!-- end card -->
    

Like we mentioned before, all cards are usable in the plain version too. If you wish to use the price cards in the plain version, it is best to use the "card-price-separator” class to create a division between them. You can see an example here.

Full Background Cards

To use this special kind of cards, you have to add the “card-background” to the card. You can use all filters mentioned above by adding the “filter filter-{color}” class inside the "image" class.
We created a javascript function that takes the background for every card and fits it perfectly, so that the cards looks nice no matter the size. This is how you can call it: gsdk.fitBackgroundForCards();
To see more examples of full background cards, please go here.

Apartment Card

See Full Implementation
    <div class="card card-background">

        <div class="image">

            <img src="assets/img/thumb.jpg" alt="..."/>

            <div class="filter"></div>

        </div>

         <div class="content">

            <h5 class="price">&euro; 129,00

                 <a href="#" class="pull-right">

                    <i class="fa fa-heart"></i>

                 </a>

             </h5>

            <a href="#"><br>

                <h4 class="title">Premium Apartment in Old Town</h4>



            </a>

        </div>

        <div class="footer">

           <div class="author">

                <a href="#">

                   <img src="assets/img/default-avatar.png" alt="..." class="avatar">

                   <span>Alex</span>

                </a>

            </div>

           <div class="stats pull-right">

                <i class="fa fa-comment"></i>  253 Reviews

           </div>

        </div>

    </div> <!-- end card -->
    

Video Card

The video card is an extension to the full background card, having the background made of video. To use, you need to add the "video" tag inside your card. The "video" tag needs an id attribute, since you need to control the "play" and "pause" actions for it.
Inside the card you need to place the very important play button. If the video is in play mode, the button will be transformed in pause. Having this button is crucial, since he represents the trigger for the video and contains all the needed information in its attributes data-video = “id-video” si data-toggle=”video”.

Featured

Get Shit Done Kit Pro is here...

See Full Implementation
    <div class="card card-background">

        <div class="video">

            <video id="video-source" preload="auto" loop="loop" muted="muted" volume="0">

                <source src="assets/video/nyc_skyline.webm" type="video/webm">

                <source src="assets/video/nyc_skyline.ogv" type="video/ogg">

                <source src="assets/video/nyc_skyline.mp4" type="video/mp4">

                Video not supported

            </video>

            <div class="filter"></div>

        </div>

        <div class="content">

             <p class="category">

                Featured

            </p>

            <h4 class="title">Get Shit Done Kit Pro is here...</h4>

        </div>

        <div class="footer">

             <button type="button" data-video="video-source" data-toggle="video" class="btn btn-neutral btn-round">

                <i class="fa fa-play"></i> Play

            </button>

             <div class="stats pull-right">

                    <i class="fa fa-comment"></i> 68

               </div>

               <div class="stats pull-right">

                    <i class="fa fa-heart"></i> 221

               </div>

        </div>

    </div> <!-- end card -->



    <!-- javascript -->

    gsdk.initVideoCards();
    

Map Card

Google Maps Card is an extension of the full background card. To be able to use it, you need a link to Google Maps and Javascript function to initialize it.

See Full Implementation
    <!-- html code -->

     <div class="card card-background">

                            <div class="map" id="map"></div>

                        </div> <!-- end card -->





    <!-- link to google maps plugin -->

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>



    <!-- init in page -->

    initGoogleMaps();



    <!-- javascript function -->

    function initGoogleMaps(){

        var myLatlng = new google.maps.LatLng(44.433530, 26.093928);

        var mapOptions = {

          zoom: 14,

          center: myLatlng,

          scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page

        }

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);



        var marker = new google.maps.Marker({

            position: myLatlng,

            title:"Hello World!"

        });



        // To add the marker to the map, call setMap();

        marker.setMap(map);

    }
    

Datepicker

The re-styled the Bootstrap datepicker and we added the Get Shit Done colors, which you can give as parameter to the plugin: color = {blue,azure,green,orange,red}.

See Markup and Javascript
    <!-- markup -->

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



    <!-- javascript -->

    $('.datepicker').datepicker({

             weekStart:1,

             color: '{color}'

    });
    

Tooltips

We restyled the Bootstrap tooltip.

See Markup and Javascript
    <!-- Markup -->

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

    <!-- Javascript -->
    $('.btn-tooltip').tooltip();
    

Popovers

We restyled the Bootstrap popover and we added an extra effect of opening. When the popover is active, the background of the page gets darker, letting you concentrate on the information inside the popover.
See the following example:

See Markup and Javascript
    <!-- markup -->

    <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>



    <!-- javascript -->

    gsdk.initPopovers();
    

Collapsable Groups

The Get Shit Done Kit has new classes for collapsable groups which offer a nice sneak peak into the content of the body of the group.
If you want to stick with the old classes, they remain compatible. If you want to see the new ones, you will have to add data-toggle="gsdk-collapse" instead of "collapse".

Here is an example of both the groups. The first two are done using the preview on hover and the third one is classical.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
See Full Implementation
    <div id="acordeon">

        <div class="panel-group" id="accordion">

          <div class="panel panel-default">

            <div class="panel-heading">

              <h4 class="panel-title">

                <a data-target="#collapseOne" href="#collapseOne" data-toggle="gsdk-collapse">

                  Collapsible Group Item #1

                </a>

              </h4>

            </div>

            <div id="collapseOne" class="panel-collapse collapse">

              <div class="panel-body">

                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

              </div>

            </div>

          </div>

          <div class="panel panel-default">

            <div class="panel-heading">

              <h4 class="panel-title">

                <a data-target="#collapseTwo" href="#collapseTwo" data-toggle="gsdk-collapse">

                  Collapsible Group Item #2

                </a>

              </h4>

            </div>

            <div id="collapseTwo" class="panel-collapse collapse">

              <div class="panel-body">

                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

              </div>

            </div>

          </div>

          <div class="panel panel-default">

            <div class="panel-heading">

              <h4 class="panel-title">

                <a data-toggle="collapse" href="#collapseThree">

                  Collapsible Group Item #3

                </a>

              </h4>

            </div>

            <div id="collapseThree" class="panel-collapse collapse">

              <div class="panel-body">

                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

              </div>

            </div>

          </div>

        </div>



    </div><!--  end acordeon -->
    

Charts

For the implementation of graphic charts, we used the Chartist plugin and added our custom styles. The plugin is free to download and use here. The guys behind the project did an awesome job and we recommend using it. Besides all the great customisation that you have using it, it is also fully responsive.

Line Chart

We recommend using this chart when you have easy to understand information, that can be conveyed in a single line throughout a continuous period.

24 Hours Performance

See Full Implementation
    <!-- graphic area in html -->



    <h4> <br><small>24 Hours Performance</small></h4>

    <div id="chartPerformance" class="ct-chart ct-perfect-fourth"></div>



    <!-- javascript -->

    var dataPerformance = {

      labels: ['9pm', '2am', '8am', '2pm', '8pm'],

      series: [

        [1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]

      ]

    };



    var optionsPerformance = {

      showPoint: false,

      lineSmooth: true,

      axisX: {

        showGrid: false,

        showLabel: true

      },

      axisY: {

        offset: 40,

      },

      low: 0,

      high: 20

    };



    Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);
    

Line Chart with Points

This graphic is best used when you have multiple results for different points and you want to show a correlation (growth, down-side, etc).

NASDAQ: AAPL

See Full Implementation

    <!-- graphic area in html -->

    <h4></small> <br><small>NASDAQ: AAPL</small></h4>

    <div id="chartStock" class="ct-chart ct-perfect-fourth"></div>



    <!-- javascript -->

    var dataStock = {

      labels: ['2009', '2010', '2011', '2012', '2013', '2014'],

      series: [

        [22.20, 28.16, 34.90, 42.28, 47.26, 48.89, 51.93, 55.32, 59.21, 62.21, 75.50, 80.23, 60.32, 55.03, 62.21, 78.83, 82.12, 89.21, 102.50, 107.23]

      ]

    };



    var optionsStock = {

      lineSmooth: false,

      axisY: {

        offset: 40,

        labelInterpolationFnc: function(value) {

            return '$' + value;

          }



      },

      low: 10,

      high: 110,

       classNames: {

          point: 'ct-point ct-green',

          line: 'ct-line ct-green'

      }

    };



    var $chart = $('#chartStock');



    Chartist.Line('#chartStock', dataStock, optionsStock);
    

Multiple Lines Chart

We recommend you use this graphic when you need to show multiple functions in the same visual element. For example, you can see a correlation between the registered versus active users. Always try to use a legend when you have multiple elements in the graphic.

Users Behavior

Legend
Visited Site
Register
Login 2nd time
See Full Implementation
    <!-- graphic area in html -->

    <h4><small>Users Behavior</small></h4>

    <div id="chartSales" class="ct-chart ct-perfect-fourth"></div>

    <h6>Legend</h6>

    <i class="fa fa-circle text-info"></i> Visited Site<br>

    <i class="fa fa-circle text-success"></i> Register<br>

    <i class="fa fa-circle text-warning"></i> Login 2nd time



    <!-- javascript -->

    var dataSales = {

      labels: ['2009', '2010', '2011', '2012', '2013', '2014'],

      series: [

        [287, 385, 490, 492, 554, 586, 698, 695, 752, 788, 846, 944],

        [67, 152, 143, 240, 287, 335, 435, 437, 539, 542, 544, 647],

        [23, 113, 67, 108, 190, 239, 307, 308, 439, 410, 410, 509]

      ]

    };



    var optionsSales = {

      lineSmooth: false,

      axisY: {

        offset: 40

      },

      low: 0,

      high: 1000

    };



    Chartist.Line('#chartSales', dataSales, optionsSales);
    

Pie Chart

A pie chart is the easiest way to represent an information. Use it whenever you want to show something understandable at once.

Public Preferences

Legend
Apple Samsung BlackBerry Windows Phone
See Full Implementation
    <!-- graphic area in html -->

    <h4><small>Public Preferences</small></h4>

    <div class="row margin-top">

     <div class="col-md-10 col-md-offset-1">

         <div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>

     </div>

    </div>

    <div class="row">

     <div class="col-md-10 col-md-offset-1">

         <h6>Legend</h6>

         <i class="fa fa-circle text-info"></i> Apple

         <i class="fa fa-circle text-success"></i> Samsung

         <i class="fa fa-circle text-warning"></i> BlackBerry

         <i class="fa fa-circle text-danger"></i> Windows Phone

     </div>

    </div>



    <!-- javascript -->

    Chartist.Pie('#chartPreferences', {

      labels: ['46%','28%','15%','11%'],

      series: [46, 28, 15, 11]

    });
    

Bar Chart

We recommend using the bar chart whenever you want to show progress over periods of time. Here is an example.

Views

See Full Implementation
    <!-- graphic area in html -->

    <h4><small>Views</small></h4>

    <div id="chartViews" class="ct-chart ct-perfect-fourth"></div>



    <!-- javascript -->

    var dataViews = {

      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

      series: [

        [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]

      ]

    };



    var optionsViews = {

      seriesBarDistance: 10,

      classNames: {

        bar: 'ct-bar ct-azure'

      },

      axisX: {

        showGrid: false

      }

    };



    var responsiveOptionsViews = [

      ['screen and (max-width: 640px)', {

        seriesBarDistance: 5,

        axisX: {

          labelInterpolationFnc: function (value) {

            return value[0];

          }

        }

      }]

    ];



    Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);
    

Multiple Bars Chart

Go for multiple bars charts if you want to show two indicators side by side.

Activity
Multiple Bars Chart

Legend
Views Reads
See Full Implementation
    <!-- graphic area in html -->

    <h4>Activity <br><small>Multiple Bars Chart</small></h4>

    <div id="chartActivity" class="ct-chart ct-perfect-fourth"></div>

    <h6>Legend</h6>

    <span class="label label-info">Views</span>

    <span class="label label-success">Reads</span>



    <!-- javascript -->

    var data = {

      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

      series: [

        [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],

        [412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695]

      ]

    };



    var options = {

      seriesBarDistance: 10,

       axisX: {

            showGrid: false

        }

    };



    var responsiveOptions = [

      ['screen and (max-width: 640px)', {

        seriesBarDistance: 5,

        axisX: {

          labelInterpolationFnc: function (value) {

            return value[0];

          }

        }

      }]

    ];



    Chartist.Bar('#chartActivity', data, options, responsiveOptions);
    

Notifications

The new Get Shit Done notification are looking fresh and clean. They go great with the navbar. If you want to see how we recommend using them, see this example.

You can also use it like "alert alert-auto-close" if you want the notification to be automatically closed in 5 seconds.