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:
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:
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:
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}”.
$(':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.
We are very proud to present the dropdown, we added a subtle animation for this classic widget. We also thought of another 2 popular use-cases: dropdown with flags ( requires no additional class) and dropdown with icons (requires the “dropdown-with-icons” class).
You can use both sets of icons: Stroke and Font Awesome; for this particular case, we suggest using the thin-line Stroke ones.
Here are some examples and the code:
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.
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
We added an extra class for Navbar containing icons. If you wish to use it, you should add the "navbar-icons" class. Check out the following example for reference:
There is also an Off Canvas Menu which can be accese using class "navbar-burger".
IMPORTANT! Since this kind of menu require some javascript functions which are triggered when the page is loaded please check the live example here. So the example that is presented in documentation is just for design purpose of the Navbar Burger Menu.
Besides the default navbar, we added 5 new colors: blue, azure, green, orange, red. If you want to use one of them, you have to replace the 'navbar-default' with the class for the chosen color 'navbr-ct-#color'.
Besides all this customisation, we have an extra navbar. 'Navbar-transparent' is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling for a certain number of pixels. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check this page out.
Nav Pills
We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation.
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.
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.
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.
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}”.
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.
<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.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
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.
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.
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.
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.
<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>
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:
<!-- 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.
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.
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.
<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.
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.
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.
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:
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.
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”.
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.
<!-- 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}.
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal Core -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info btn-simple">Save</button>
</div>
</div>
</div>
</div>
<!-- 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:
<!-- 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.
<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.
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.
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.
Modal title
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.