Hey Kids 3.0 Document info


General Info

What is hey-kids.3-singlepage HTML template?

hey-kids.3-singlepage is a singlepages website template for children activity-related purposes. The main purpose of this template be use as educational or non-educational activity, but it can always be flexible and this template try to accomodate that.
Built using Twitter's Bootstrap3 framework technology and use flexibility in file structure that makes website modification easy and time saving. Check out the Full version of Hey-Kids Responsive website
General Info

About Bootstrap

You can find complete info about Bootstrap in this website. hey-kids.3-singlepage currently using Bootstrap v3.3.2.
General Info

Template File Structure

The template files of hey-kids.3-singlepage are simple and use the same principle for each pages.
hey-kids.3-singlepage use .html file as independent element. The .html file is a general element such as header.html, footer.html, menu.html etc.
In .php file those files merged to make a single page file. All of the template files are stored in assets folder.
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Promo. You'll see something like this

hey-kids.3-singlepage/
  ├── assets/
  │    ├── css/
  │    ├── DATA-contents/
  │    ├── font-awesome/
  │    ├── fonts/
  │    ├── html-components/
  │    ├── html-components-js/
  │    ├── html-dark-bg/
  │    ├── html-light-bg/
  │    ├── html-menu/
  │    ├── html-page-elements/
  │    ├── html-parallax-bg/
  │    └── images/
  │    │   ├── background/
  │    │   ├── logo/
  │    │   ├── shop/
  │    │   └── slideshow/
  │    ├── js/
  │    ├── minify/
  │    ├── twitteroauth/
  │    └── index.php
  ├── doc/
  │    └── index.php
  ├── home/
  │    └── index.php
  ├── index/
       ├── index-10.php
       ├── index-9.php
       ├── index-8.php
       ├── index-7.php
       ├── index-6.php
       ├── index-5.php
       ├── index-4.php
       ├── index-3.php
       ├── index-2.php
       └── index.php
Coding Structures and Pages

CSS Files

There are 22 CSS files of hey-kids.3-singlepage. THey are available in : hey-kids.3-singlepage/assets/css.
CSS Files
  • animate.css : This is for animation styling of mouse activity (mouse over) on object
  • bootstrap.css : This is the default css file of entire bootstrap styling (do not edit this file)
  • bootstrap.theme.css : This is the theme colors from boostrap
  • bootstrap.theme-2.css : This is the theme colors from boostrap
  • bootstrap.theme-3.css : This is the theme colors from boostrap
  • bordered.css : This is syling for fix width template in option panel
  • calendar.css : This is syling for event calendar in event page
  • docs.min.css : This is the default css file of entire bootstrap styling (do not edit this file)
  • dropdown.css : This is syling for menu and megamenu dropdown navigation
  • logo-slider.css : This is for styling logo partner slider only
  • option-panel.css : This is the style and design of hey-kids.3-singlepage style switcher option panel
  • paymentfont.css : This is the style and design of payment icons in shop page
  • portfolio-grid.css : This is for display and animate gallery in portfolio grid page
  • portfolio-sortable.css : This is for display and animate gallery in portfolio sortable page
  • shop.css : This is for display and animate gallery in shop page
  • slideshow.css : This is for styling slideshow in introduction section in index pages
  • social-media.css : This is for styling social media buttons
  • style.css : This is the style and design of hey-kids.3-singlepage template (use this to change into style of your own)
  • type.css : This is for font style and character of hey-kids.3-singlepage (use this to change into style of your own)
Coding Structures and Pages

JQuery Files and scripts

There are 26 JQuery scripts and 2 json files hey-kids.3-singlepage. THey are are available in : hey-kids.3-singlepage/assets/js.
Most of them are default by Bootstrap so it is better to leave them alone :-). Other than that is addition to make hey-kids.3-singlepage look cool. That JQuery are :
JQuery by default
  • bootstrap.min.js : default by bootstrap
  • ie-emulation-modes-warning.js : default by bootstrap
  • ie10-viewport-bug-workaround.js : default by bootstrap
  • jquery.js : default by bootstrap
  • jquery.min.js : default by bootstrap
JQuery for gallery portfolio grid
  • AnimOnScroll.js : JQuery Gallery
  • classie.js : JQuery Gallery
  • imagesloaded.pkgd.min.js : JQuery Gallery
  • masonry.pkgd.min.js : JQuery Gallery
JQuery for gallery portfolio sortable
  • imagesloaded.pkgd.min.js : JQuery expand Gallery
  • jquery.isotope.js : JQuery Gallery Expand Content
JQuery for expand content
  • modernizr.custom.js : JQuery our team expand content
  • toucheffects.js : JQuery our team expand content
JQuery for calendar event
  • fullcalendar.min.js : JQuery scroll menu Javascripts
JQuery for Google map
  • googlemap.js : JQuery google map Javascripts
JQuery for image replacement
  • docs.min.js : JQuery image replacement
  • holder.js : JQuery image replacement
JQuery for smooth fade in animation
  • jquery.easing.min.js : default by bootstrap
JQuery for preload images/content
  • viewportchecker.js : JQuery Lazy Load
JQuery for Counter number
  • counterup.jquery.json : JSon File
  • jquery.counterup.min.js : JQuery Counter
  • waypoints.min.js : JQuery Counter
JQuery for CountDown number
  • jquery.countdown.min.js : JQuery Lazy Load
  • countdown.jquery.json : JSon File
JQuery for logo slider
  • owl.carousel.js : JQuery logo slider on index single page
JQuery for preloader progress js
  • jquery.loadingbar.js : JQuery preload bar on all page
Coding Structures and Pages

HTML and PHP Files

The HTML of hey-kids.3-singlepage are available in :
  • hey-kids.3-singlepage/assets / DATA-contents
  • hey-kids.3-singlepage/assets / HTML-components
  • hey-kids.3-singlepage/assets / HTML-components-js
  • hey-kids.3-singlepage/assets / HTML-dark-bg
  • hey-kids.3-singlepage/assets / HTML-light-bg
  • hey-kids.3-singlepage/assets / HTML-menu
  • hey-kids.3-singlepage/assets / HTML-page-elements
  • hey-kids.3-singlepage/assets / HTML-parallax-bg

Specific folder HTML files : DATA-contents

This files are contents that included to display HTML in HTML-dark-bg, HTML-light-bg and HTML-parallax-bg.
This content usually all about informations

  • 01-about.html : file for about us information
  • 02-about-this-web.html : file for about this web information
  • 03-ourteam.html : file for our team member information
  • 04-who-we-are.html : file for who we are / board of directors information
  • 05-what-we-can-do.html : file for whaat we can do information
  • 06-our-expertise.html : file for expertise information
  • 07-buy-me.html : file for any information
  • 08-pricetable.html : file for price information
  • 09-faq.html : file for faq information
  • 10-logos.html : file for partners information
  • 11-counter.html : file for activity numbers information
  • 12-tweet.html : file for display latest twitter information
  • 99-contact.html : file for contact information
  • 99b-contact.html : file for contact with form information

Specific folder HTML files : HTML-components

This files are items that useful to display HTML element.

  • 01-glyphicons.html : file for glyphicons item
  • 02-dropdown.html : file for dropdown menu item
  • 03-breadcrumb.html : file for breadcrumb navigation item
  • 04-pagination.html : file for pagination item
  • 04b-pagination.html : file for pagination item
  • 05-button.html : file for buttons item
  • 06-label-badges.html : file for labels and badges item
  • 07-alert.html : file for alert item
  • 08-progressbar.html : file for progress bar item
  • 09-responsive-embed.html : file for responsive embed item
  • 10-wells.html : file for well item
  • 11-typography.html : file for typography item
  • 12-grid.html : file for grid item
  • 13-tables.html : file for tables item
  • 14-lists.html : file for grid item
  • 15-bubble-text.html : file for grid item
  • 16-font-awesome.html : file for font awesome glyphicons item
  • 17-form.html : file for form item
  • 17b-horizontal-form.html : file for horizontal form item
  • 17c-inline-form.html : file for inline form item
  • 18-code.html : file for display code item
  • 19-social-media.html : file for social media buttons
  • 19b-social-media-list.html : file for social media buttons applied in footer
  • 19c-payment.html : file for payment media buttons
  • 20-box-content-2-col.html : file for display custom content wrapped in box 2 column
  • 20b-box-content-3-col.html : file for display custom content wrapped in box 3 column
  • 20c-box-content-4-col.html : file for display custom content wrapped in box 4 column

Specific folder HTML files : HTML-components-js

This files are items using javascript that useful to display HTML element.

  • 01-modalbox.html : file for modalbox item
  • 01b-modalbox-basic-form.html : file for modalbox basic form item
  • 01c-modalbox-horizontal-form.html : file for modalbox horizontal form item
  • 01d-modalbox-form-inline.html : file for modalbox inline form item
  • 02-scrollspy.html : file for scrollspy item
  • 03-tab.html : file for tab item
  • 04-tooltip.html : file for tooltip item
  • 05-collapse.html : file for expand/collapse item
  • 06-carousel.html : file for carousel slideshow item
  • 06b-carousel-logos.html : file for carousel slideshow item
  • 06c-carousel-testimonial.html : file for carousel slideshow testimonial item
  • 06d-carousel-shop-product.html : file for carousel slideshow
  • 06e-carousel-slippry-slider.html : file for slippry slideshow
  • 06f-carousel-scattered-slider.html : file for scattered slideshow
  • 06h-carousel-image-only.html : file for carousel slideshow image only
  • 07-googlemap.html : file for google map item
  • 08-counter.html : file for conter number item
  • 09-countdown.html : file for count down number item
  • 11-video.html : file for html5 video

Specific folder HTML files : HTML-dark-bg, HTML-light-bg and HTML-parallax-bg

HTML-dark-bg, HTML-light-bg, HTML-parallax-bg have similar content, the difference is only on their background color.
In html-parallax-bg folder (HTML files that contain scrolling parallax background image), the images are stored in assets/images/background

This files are items that useful to display HTML content.

  • 01-about.html : file for about us content
  • 02-about-this-web.html : file for about hey-kids.3-singlepage content
  • 03-ourteam.html : file for our team content
  • 03b-ourteam.html : file for our team content (without expand content)
  • 04-who-we-are.html : file for who we are content
  • 05-what-we-can-do.html : file for what we can do content
  • 06-our-expertise.html : file for our expertise content
  • 07-buy-me.html : file for buy me content
  • 08-pricetable.html : file for price table content
  • 09-faq.html : file for frequenlty asked questions content
  • 10-logos.html : file for partners logo
  • 11-counter.html : file for counter number content
  • 12-tweet.html : file for display twitter last post content
  • 99-contact.html : file for contact us content

Specific folder HTML files : HTML-page-elements

This files are items that useful to display HTML general content in HTML-page-elements folder.

  • 01-header.html : file for every header page
  • 02-footer.html : file for every footer page
  • 02-footer-contact.html : file for footer in contact page
  • 02-footer-index page.html : file for footer single page
  • 03-menu.html : file for every menu page
  • 04-topcontent.html : file for top content in single page
  • 04-topcontent-marketing.html : file for top content in cover page 02
  • 04-topcontent-slideshow.html : file for top content in single page 03
  • 05-portfolio-sortable.html : file for gallery/portfolio thumbnails in gallery/portfolio page
  • 05-portfolio-grid.html : file for gallery/portfolio thumbnails in gallery/portfolio 02 page
  • 06-search.html : file for search in news page
  • 07-comments.html : file for comments in news page
  • 08-comment-form.html : file for comment form in news page
  • 09-news-centercolumn.html : file for center column in news page
  • 09-news-rightcolumn.html : file for right column in news page
  • 10-shop.html : file for shop product in shop page
  • 10-shop-2-col.html : file for shop product
  • 10-shop-2-col-left.html : file for shop product
  • 10-shop-3-col.html : file for shop product
  • 10-shop-3-col-left.html : file for shop product
  • 10-shop-4-col.html : file for shop product
  • 10-shop-column.html : file for shop product in all shop pages with column
  • 10-shop-recommended.html : file for shop product in all shop pages
  • 11-subscribe.html : file for subscribe form in column section
  • 98-option-panel.html : file for option panel in every page
  • 99-general-scripts.html : file for jquery activation script in every page
  • serversideSwitch.html : file for stlye switcher script in every page

Specific folder PHP files

All the php files are only combination of multipe HTML file to create one single page

  • about folder contain php files for about page
  • announcement folder contain php files for announcement page
  • channel folder contain php files for channel page
  • contact folder contain php files for contact page
  • cover folder contain php files for cover page
  • doc folder contain php files for doc page
  • error folder contain php files for error page
  • event folder contain php files for event page
  • faq folder contain php files for faq page
  • gallery folder contain php files for gallery page
  • index folder contain php files for index page
  • login folder contain php files for login page
  • news folder contain php files for news page
  • program folder contain php files for program page
  • register folder contain php files for register page
  • services folder contain php files for services page
  • shop folder contain php files for shop page
  • testimonial folder contain php files for testimonial page

Specific folder PHP files : minify

This files are items using php that useful to minify HTML or CSS or JS element.

  • minified.css.php : file for minifying CSS file
  • minified.html.php : file for minifying HTML file
  • minify.php : file for minifying CSS and JS file

Specific folder PHP files : twitteroauth

This files are items using php that useful to display twitter post.

  • twitteroauth.php : file for display twitter file, you can post your twitter setting to display your own twitter post
  • OAuth.php : file for display twitter file (do not edit this file)

Files and Folders

hey-kids.3-singlepage Folder and Pages

The hey-kids.3-singlepage template have only 10 template pages and stored in index folder.
Modifications : Build Pages

About sections/components

As you can see from folder index, this template provide 10 available page that can be customized to your needs. Each of the sections are available in assets/HTML-dark-bg, assets/HTML-light-bg and assets/HTML-parallax-bg. Sections also available in assets/HTML-page-elements. Why? Because section represent grouping of content. Section is used to connect the navigation link for scrollspy purpose.

Sample of how this section works:

Modifications : Build Pages

Building page from sections/components

You can design new page quickly by edit/add existing file inside index folder. Below is an example code of index page :

<?php include("../assets/HTML-page-elements/01-header.html"); ?>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<?php include("../assets/HTML-components-js/01-modalbox.html"); ?>

<?php include("../assets/HTML-page-elements/03-menu.html"); ?>

<?php include("../assets/HTML-page-elements/04-topcontent-slideshow.html"); ?>

<div class="inset" data-spy="scroll" data-target="#navbar-custom">

<div id="01"></div>
<?php include("../assets/HTML-light-bg/01-about.html"); ?>

<div id="02"></div>
<?php include("../assets/HTML-parallax-bg/04-who-we-are.html"); ?>

<div id="03"></div>
<?php include("../assets/HTML-light-bg/03-ourteam.html"); ?>

<div id="04"></div>
<?php include("../assets/HTML-parallax-bg/06-our-expertise.html"); ?>

<div id="05"></div>
<?php include("../assets/HTML-page-elements/05-gallery-sortable.html"); ?>

<div id="06"></div>
<?php include("../assets/HTML-light-bg/08-pricetable.html"); ?>

<div id="07"></div>
<?php include("../assets/HTML-parallax-bg/10-logos.html"); ?>

<div id="08"></div>
<?php include("../assets/HTML-light-bg/12-tweet.html"); ?>

<div id="09"></div>
<?php include("../assets/HTML-page-elements/02-footer-googlemap.html"); ?>

</div>

<?php include("../assets/HTML-page-elements/99-general-scripts.html"); ?> </body> </html>


You can swith between each section by changing the background ( ie. switch from light-bg to parallax-bg ) or change it to other page elements or add more component into your section.

Modifications : Build Pages

Connecting navigation to sections/components

We connect navigation links and sections by using Bootstrap scrollspy technique. Sample:

Navigation link on menu file:
<li><a href="#01" data-scroll>about</a></li>

Navigation link on page file:
<div id="01"></div>
<?php include("../assets/HTML-light-bg/01-about.html"); ?>


Using HTML href="[value]" to target id="[value]" will make connection between the menu link and the sections in page file. The content [value] must have the same name between each other.

Modifications : General Elements

How to change logo and header

in assets / HTML-page-elements / folder, open and edit 03-menu.html file, look for

<span class="light">Hey Kids</span> 3.0

in assets / HTML-page-elements / folder, open and edit 04-topcontent.html file, look for

<h1 class="brand-heading">Hey Kids</h1>
Modifications : General Elements

How to change footer

in assets / HTML-page-elements / folder, open and edit 02-footer.html file for general footer, or open and edit 02-footer-contact.html file for footer in contact us page, or open and edit 02-footer-index page.html file for footer in single page
Modifications : General Elements

How to change background

in assets / css / folder, open and edit bootstrap-theme.css file, on line 12 edit
background-color: #f4f4f4;

in assets / css / folder, open and edit bootstrap-theme-2.css file, on line 21 edit
background-color: #E9FADE;

in assets / css / folder, open and edit bootstrap-theme-3.css file, on line 22 edit
background-color: #FFEEB7;

Modifications : General Elements

How to change menu

in assets / HTML-page-elements / folder, open and edit 03-menu.html file
Modifications : General Elements

How to change Dropdown Menu

in assets / HTML-page-elements / folder, open and edit 03-menu.html file, edit code

<li class="dropdown">...</li>
Modifications : General Elements

How to change Dropdown Mega Menu

in assets / HTML-page-elements / folder, open and edit 03-menu.html file, edit code

<li class="dropdown-menu mega-menu">...</li>
Modifications : news

How to change Center Column in news

in assets / HTML-page-elements / folder, open and edit 09-news-centercolumn.html file

Modifications : news

How to change Right Column in news / Program / Channel

in assets / HTML-page-elements / folder, open and edit 09-news-rightcolumn.html file

in assets / HTML-page-elements / folder, open and edit 12-channel-rightcolumn.html file

in assets / HTML-page-elements / folder, open and edit 13-program-rightcolumn.html file
Modifications : news

How to change Facebook Comment in News / Program / Channel

in in news folder, open and edit news-detail.php. See Facebook API for more detail
Modifications : Custom Elements

How to change Top Content

in assets / HTML-page-elements / folder, open and edit 04-topcontent.html, or 04-topcontent-marketing.html, or 04-topcontent-slideshow.html, or 04-topcontent-slippry-slideshow.html, or 04-topcontent-scattered-slideshow.html file
Modifications : Custom Elements

How to change Slideshow/Carousel

in assets / HTML-components-js / folder, open and edit 06-carousel.html file, or 06b-carousel-logos.html file for partner slidehow logos, or 06c-carousel-testimonial.html file for testimonial slideshow content, or 06d-carousel-shop-product.html file for product detail slideshow content for generic slideshow content
Modifications : Custom Elements

How to change Modal Box

in assets / HTML-components-js / folder, open and edit 01-modalbox.html, or 01b-modalbox-basic-form.html, or 01c-modalbox-horizontal-form.html, or 01d-modalbox-form-inline.html file
Modifications : Custom Elements

How to change Google Maps

in assets / HTML-page-elements / folder, open and edit 99-general-scripts.html file and
in assets/js folder, open and edit grayscale.js file
To Change the lattitude and longitude fileof the map, in assets/js, on line 24 open and edit grayscale.js, find code below :

center: new google.maps.LatLng(..., ...),
Modifications : Custom Elements

How to change Tabs

in assets / HTML-components-js / folder, open and edit 03-tab.html file
Modifications : Custom Elements

How to change Expand/Collapse

in assets / HTML-components-js / folder, open and edit 05-collapse.html file
Modifications : Custom Elements

How to change Portfolio Page/Gallery

in assets / HTML-page-elements / folder, open and edit 05-gallery.html file or
open and edit 05-gallery-sortable.html file
Modifications : Custom Elements

How to change Pricetable

in assets / HTML-dark-bg / folder, open and edit 08-pricetable.html file or
in assets / HTML-light-bg / folder, open and edit 08-pricetable.html file or
in assets / HTML-parallax-bg / folder, open and edit 08-pricetable.html file
Modifications : Custom Elements

How to change Contact Us

in assets / HTML-dark-bg / folder, open and edit 99-contact.html file or
in assets / HTML-light-bg / folder, open and edit 99-contact.html file or
in assets / HTML-parallax-bg / folder, open and edit 99-contact.html file
Modifications : Custom Elements

How to change Social Media url/link

in assets / HTML-page-elements / folder, open and edit 02-footer.html file for general footer, or open and edit 02-footer-contact.html file for footer in contact us page, or open and edit 02-footer-index page.html file for footer in single page, look for

<ul class="list-inline margintop banner-social-buttons">
<li><a href="" class="btn btn-circle-inverse btn64"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="" class="btn btn-circle-inverse btn64"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="" class="btn btn-circle-inverse btn64"><i class="fa fa-google-plus fa-fw"></i></a></li>
<li><a href="" class="btn btn-circle-inverse btn64"><i class="fa fa-github fa-fw"></i></a></li>
</ul>

Modifications : others

How to change Custom font

in assets / HTML-page-elements / folder, open and edit type.css file

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Nunito:300,400,700);


and in assets/css folder, open and edit type.css file, look for

/* font family
----------------------------------------------- */

body {
font-family: 'Nunito', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar
{
font-family: 'Varela Round', 'Nunito', cursive;
text-transform:uppercase;
}


You can also find other font-family in file style2.css and style3.css.
Feel free to choose your own font from Google Webfont
Modifications : others

How to edit/remove Option Panel

in assets / HTML-page-elements / folder, open and edit 98-option-panel.html file
Modifications : others

How to remove scroll to top button

in assets / HTML-page-elements / folder, open and edit 02-footer.html file

<!-- Back To Top -->
<a id="back-to-top" href="#" class="btn btn-default btn-lg back-to-top" role="button"
title="Click to return on the top page" data-toggle="tooltip" data-placement="left">
<span class="glyphicon glyphicon-chevron-up"></span></a>

Components

Glyph Icons

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up
<li>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
</li>

<li>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon-class">glyphicon glyphicon-plus</span>
</li>

<li>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon-class">glyphicon glyphicon-euro</span>
</li>

and so on ...
Components

Font awesome Icons

Includes 200 glyphs in font format from the Font Awesome set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.

  • fa fa-2x fa-glass
  • fa fa-2x fa-music
  • fa fa-2x fa-search
  • fa fa-2x fa-envelope
  • fa fa-2x fa-heart
  • fa fa-2x fa-star
  • fa fa-2x fa-star-o
  • fa fa-2x fa-user
  • fa fa-2x fa-film
  • fa fa-2x fa-th-large
  • fa fa-2x fa-th
  • fa fa-2x fa-th-list
  • fa fa-2x fa-check
  • fa fa-2x fa-times
  • fa fa-2x fa-search-plus
  • fa fa-2x fa-search-minus
  • fa fa-2x fa-power-off
  • fa fa-2x fa-signal
  • fa fa-2x fa-gear
  • fa fa-2x fa-cog
  • fa fa-2x fa-trash-o
  • fa fa-2x fa-home
  • fa fa-2x fa-file-o
  • fa fa-2x fa-clock-o
  • fa fa-2x fa-road
  • fa fa-2x fa-download
  • fa fa-2x fa-arrow-circle-o-down
  • fa fa-2x fa-arrow-circle-o-up
  • fa fa-2x fa-inbox
  • fa fa-2x fa-ply-circle-o
  • fa fa-2x fa-rotate-right
  • fa fa-2x fa-repeat
  • fa fa-2x fa-refresh
  • fa fa-2x fa-list-alt
  • fa fa-2x fa-lock
  • fa fa-2x fa-flag
  • fa fa-2x fa-headphones
  • fa fa-2x fa-volume-off
  • fa fa-2x fa-volume-down
  • fa fa-2x fa-volume-up
  • fa fa-2x fa-qrcode
  • fa fa-2x fa-barcode
  • fa fa-2x fa-tag
  • fa fa-2x fa-tags
  • fa fa-2x fa-book
  • fa fa-2x fa-bookmark
  • fa fa-2x fa-print
  • fa fa-2x fa-camera
  • fa fa-2x fa-font
  • fa fa-2x fa-bold
  • fa fa-2x fa-italic
  • fa fa-2x fa-text-height
  • fa fa-2x fa-text-width
  • fa fa-2x fa-align-left
  • fa fa-2x fa-align-center
  • fa fa-2x fa-align-right
  • fa fa-2x fa-align-justify
  • fa fa-2x fa-list
  • fa fa-2x fa-dedent
  • fa fa-2x fa-outdent
  • fa fa-2x fa-indent
  • fa fa-2x fa-video-camera
  • fa fa-2x fa-pencil
  • fa fa-2x fa-map-marker
  • fa fa-2x fa-adjust
  • fa fa-2x fa-tint
  • fa fa-2x fa-edit
  • fa fa-2x fa-pencil-square-o
  • fa fa-2x fa-check-square-o
  • fa fa-2x fa-arrows
  • fa fa-2x fa-step-backward
  • fa fa-2x fa-fast-backward
  • fa fa-2x fa-backward
  • fa fa-2x fa-play
  • fa fa-2x fa-pause
  • fa fa-2x fa-stop
  • fa fa-2x fa-forward
  • fa fa-2x fa-fast-forward
  • fa fa-2x fa-step-forward
  • fa fa-2x fa-eject
  • fa fa-2x fa-chevron-left
  • fa fa-2x fa-chevron-rightßß
  • fa fa-2x fa-plus-circle
  • fa fa-2x fa-minus-circle
  • fa fa-2x fa-times-circle
  • fa fa-2x fa-check-circle
  • fa fa-2x fa-question-circle
  • fa fa-2x fa-info-circle
  • fa fa-2x fa-crosshairs
  • fa fa-2x fa-times-circle-o
  • fa fa-2x fa-check-circle-o
  • fa fa-2x fa-ban
  • fa fa-2x fa-arrow-left
  • fa fa-2x fa-arrow-right
  • fa fa-2x fa-arrow-up
  • fa fa-2x fa-arrow-down
  • fa fa-2x fa-mail-forward
  • fa fa-2x fa-share
  • fa fa-2x fa-expand
  • fa fa-2x fa-compress
  • fa fa-2x fa-plus
  • fa fa-2x fa-minus
  • fa fa-2x fa-asterisk
  • fa fa-2x fa-exclamation-circle
  • fa fa-2x fa-gift
  • fa fa-2x fa-leaf
  • fa fa-2x fa-fire
  • fa fa-2x fa-eye
  • fa fa-2x fa-warning
  • fa fa-2x fa-exclamation-triangle
  • fa fa-2x fa-plane
  • fa fa-2x fa-calendar
  • fa fa-2x fa-random
  • fa fa-2x fa-comment
  • fa fa-2x fa-magnet
  • fa fa-2x fa-chevron-up
  • fa fa-2x fa-chevron-down
  • fa fa-2x fa-retweet
  • fa fa-2x fa-shopping-cart
  • fa fa-2x fa-folder
  • fa fa-2x fa-folder-open
  • fa fa-2x fa-arrows-v
  • fa fa-2x fa-arrows-h
  • fa fa-2x fa-bar-chart-o
  • fa fa-2x fa-twitter-square
  • fa fa-2x fa-facebook-square
  • fa fa-2x fa-camera-retro
  • fa fa-2x fa-key
  • fa fa-2x fa-gears
  • fa fa-2x fa-cogs
  • fa fa-2x fa-comments
  • fa fa-2x fa-thumbs-o-up
  • fa fa-2x fa-thumbs-o-down
  • fa fa-2x fa-star-half
  • fa fa-2x fa-heart-o
  • fa fa-2x fa-sign-out
  • fa fa-2x fa-linkedin-square
  • fa fa-2x fa-thumb-tack
  • fa fa-2x fa-external-link
  • fa fa-2x fa-sign-in
  • fa fa-2x fa-trophy
  • fa fa-2x fa-github-square
  • fa fa-2x fa-upload
  • fa fa-2x fa-lemon-o
  • fa fa-2x fa-phone
  • fa fa-2x fa-square-o
  • fa fa-2x fa-bookmark-o
  • fa fa-2x fa-phone-square
  • fa fa-2x fa-twitter
  • fa fa-2x fa-facebook
  • fa fa-2x fa-github
  • fa fa-2x fa-unlock
  • fa fa-2x fa-credit-card
  • fa fa-2x fa-rss
  • fa fa-2x fa-hdd-o
  • fa fa-2x fa-bullhorn
  • fa fa-2x fa-bell
  • fa fa-2x fa-certificate
  • fa fa-2x fa-hand-o-right
  • fa fa-2x fa-hand-o-left
  • fa fa-2x fa-hand-o-up
  • fa fa-2x fa-hand-o-down
  • fa fa-2x fa-arrow-circle-left
  • fa fa-2x fa-arrow-circle-right
  • fa fa-2x fa-arrow-circle-up
  • fa fa-2x fa-arrow-circle-down
  • fa fa-2x fa-globe
  • fa fa-2x fa-wrench
  • fa fa-2x fa-tasks
  • fa fa-2x fa-filter
  • fa fa-2x fa-briefcase
  • fa fa-2x fa-arrows-alt
  • fa fa-2x fa-group
  • fa fa-2x fa-users
  • fa fa-2x fa-chain
  • fa fa-2x fa-link
  • fa fa-2x fa-cloud
  • fa fa-2x fa-flask
  • fa fa-2x fa-cut
  • fa fa-2x fa-scissors
  • fa fa-2x fa-copy
  • fa fa-2x fa-files-o
  • fa fa-2x fa-paperclip
  • fa fa-2x fa-save
  • fa fa-2x fa-floppy-o
  • fa fa-2x fa-square
  • fa fa-2x fa-bars
  • fa fa-2x fa-list-ul
  • fa fa-2x fa-list-ol
  • fa fa-2x fa-strikethrough
  • fa fa-2x fa-underline
  • fa fa-2x fa-table
  • fa fa-2x fa-magic
  • fa fa-2x fa-truck
  • fa fa-2x fa-pinterest
  • fa fa-2x fa-pinterest-square
  • fa fa-2x fa-google-plus-square
  • fa fa-2x fa-google-plus
  • fa fa-2x fa-money
  • fa fa-2x fa-caret-down
  • fa fa-2x fa-caret-up
  • fa fa-2x fa-caret-left
  • fa fa-2x fa-caret-right
  • fa fa-2x fa-columns
  • fa fa-2x fa-unsorted
  • fa fa-2x fa-sort
  • fa fa-2x fa-sort-down
  • fa fa-2x fa-sort-asc
  • fa fa-2x fa-sort-up
  • fa fa-2x fa-sort-desc
  • fa fa-2x fa-envelope
  • fa fa-2x fa-linkedin
  • fa fa-2x fa-rotate-left
  • fa fa-2x fa-undo
  • fa fa-2x fa-legal
  • fa fa-2x fa-gavel
  • fa fa-2x fa-dashboard
  • fa fa-2x fa-tachometer
  • fa fa-2x fa-comment-o
  • fa fa-2x fa-comments-o
  • fa fa-2x fa-flash
  • fa fa-2x fa-bolt
  • fa fa-2x fa-sitemap
  • fa fa-2x fa-umbrella
  • fa fa-2x fa-paste
  • fa fa-2x fa-clipboard
  • fa fa-2x fa-lightbulb-o
  • fa fa-2x fa-exchange
  • fa fa-2x fa-cloud-download
  • fa fa-2x fa-cloud-upload
  • fa fa-2x fa-user-md
  • fa fa-2x fa-stethoscope
  • fa fa-2x fa-suitcase
  • fa fa-2x fa-bell-o
  • fa fa-2x fa-coffee
  • fa fa-2x fa-cutlery
  • fa fa-2x fa-file-text-o
  • fa fa-2x fa-building-o
  • fa fa-2x fa-hospital-o
  • fa fa-2x fa-ambulance
  • fa fa-2x fa-medkit
  • fa fa-2x fa-fighter-jet
  • fa fa-2x fa-beer
  • fa fa-2x fa-h-square
  • fa fa-2x fa-plus-square
  • fa fa-2x fa-angle-double-left
  • fa fa-2x fa-angle-double-right
  • fa fa-2x fa-angle-double-up
  • fa fa-2x fa-angle-double-down
  • fa fa-2x fa-angle-left
  • fa fa-2x fa-angle-right
  • fa fa-2x fa-angle-up
  • fa fa-2x fa-angle-down
  • fa fa-2x fa-desktop
  • fa fa-2x fa-laptop
  • fa fa-2x fa-tablet
  • fa fa-2x fa-mobile-phone
  • fa fa-2x fa-mobile
  • fa fa-2x fa-circle-o
  • fa fa-2x fa-quote-left
  • fa fa-2x fa-quote-right
  • fa fa-2x fa-spinner
  • fa fa-2x fa-circle
  • fa fa-2x fa-mail-reply
  • fa fa-2x fa-reply
  • fa fa-2x fa-github-alt
  • fa fa-2x fa-folder-o
  • fa fa-2x fa-folder-open-o
  • fa fa-2x fa-smile-o
  • fa fa-2x fa-frown-o
  • fa fa-2x fa-meh-o
  • fa fa-2x fa-gamepad
  • fa fa-2x fa-keyboard-o
  • fa fa-2x fa-flag-o
  • fa fa-2x fa-flag-checkered
  • fa fa-2x fa-terminal
  • fa fa-2x fa-code
  • fa fa-2x fa-reply-all
  • fa fa-2x fa-mail-reply-all
  • fa fa-2x fa-star-half-empty
  • fa fa-2x fa-star-half-full
  • fa fa-2x fa-star-half-o
  • fa fa-2x fa-location-arrow
  • fa fa-2x fa-crop
  • fa fa-2x fa-code-fork
  • fa fa-2x fa-unlink
  • fa fa-2x fa-chain-broken
  • fa fa-2x fa-question
  • fa fa-2x fa-info
  • fa fa-2x fa-exclamation
  • fa fa-2x fa-superscript
  • fa fa-2x fa-subscript
  • fa fa-2x fa-eraser
  • fa fa-2x fa-puzzle-piece
  • fa fa-2x fa-microphone
  • fa fa-2x fa-microphone-slash
  • fa fa-2x fa-shield
  • fa fa-2x fa-calendar-o
  • fa fa-2x fa-fire-extinguisher
  • fa fa-2x fa-rocket
  • fa fa-2x fa-maxcdn
  • fa fa-2x fa-chevron-circle-left
  • fa fa-2x fa-chevron-circle-right
  • fa fa-2x fa-chevron-circle-up
  • fa fa-2x fa-chevron-circle-down
  • fa fa-2x fa-html5
  • fa fa-2x fa-css3
  • fa fa-2x fa-anchor
  • fa fa-2x fa-unlock-alt
  • fa fa-2x fa-bullseye
  • fa fa-2x fa-ellipsis-h
  • fa fa-2x fa-ellipsis-v
  • fa fa-2x fa-rss-square
  • fa fa-2x fa-play-circle
  • fa fa-2x fa-ticket
  • fa fa-2x fa-minus-square
  • fa fa-2x fa-minus-square-o
  • fa fa-2x fa-level-up
  • fa fa-2x fa-level-down
  • fa fa-2x fa-check-square
  • fa fa-2x fa-pencil-square
  • fa fa-2x fa-external-link-square
  • fa fa-2x fa-share-square
  • fa fa-2x fa-compass
  • fa fa-2x fa-toggle-down
  • fa fa-2x fa-caret-square-o-down
  • fa fa-2x fa-toggle-up
  • fa fa-2x fa-caret-square-o-up
  • fa fa-2x fa-toggle-right
  • fa fa-2x fa-caret-square-o-right
  • fa fa-2x fa-euro
  • fa fa-2x fa-eur
  • fa fa-2x fa-gbp
  • fa fa-2x fa-dollar
  • fa fa-2x fa-usd
  • fa fa-2x fa-rupee
  • fa fa-2x fa-inr
  • fa fa-2x fa-cny
  • fa fa-2x fa-rmb
  • fa fa-2x fa-yen
  • fa fa-2x fa-jpy
  • fa fa-2x fa-ruble
  • fa fa-2x fa-rouble
  • fa fa-2x fa-rub
  • fa fa-2x fa-won
  • fa fa-2x fa-krw
  • fa fa-2x fa-bitcoin
  • fa fa-2x fa-btc
  • fa fa-2x fa-file
  • fa fa-2x fa-file-text
  • fa fa-2x fa-sort-alpha-asc
  • fa fa-2x fa-sort-alpha-desc
  • fa fa-2x fa-sort-amount-asc
  • fa fa-2x fa-sort-amount-desc
  • fa fa-2x fa-sort-numeric-asc
  • fa fa-2x fa-sort-numeric-desc
  • fa fa-2x fa-thumbs-up
  • fa fa-2x fa-thumbs-down
  • fa fa-2x fa-youtube-square
  • fa fa-2x fa-youtube
  • fa fa-2x fa-xing
  • fa fa-2x fa-xing-square
  • fa fa-2x fa-youtube-play
  • fa fa-2x fa-dropbox
  • fa fa-2x fa-stack-overflow
  • fa fa-2x fa-instagram
  • fa fa-2x fa-flickr
  • fa fa-2x fa-adn
  • fa fa-2x fa-bitbucket
  • fa fa-2x fa-tumblr
  • fa fa-2x fa-tumblr-square
  • fa fa-2x fa-long-arrow-down
  • fa fa-2x fa-long-arrow-up
  • fa fa-2x fa-long-arrow-left
  • fa fa-2x fa-long-arrow-right
  • fa fa-2x fa-apple
  • fa fa-2x fa-windows
  • fa fa-2x fa-android
  • fa fa-2x fa-linux
  • fa fa-2x fa-dribbble
  • fa fa-2x fa-skype
  • fa fa-2x fa-foursquare
  • fa fa-2x fa-trello
  • fa fa-2x fa-female
  • fa fa-2x fa-male
  • fa fa-2x fa-gittip
  • fa fa-2x fa-sun-o
  • fa fa-2x fa-moon-o
  • fa fa-2x fa-archive
  • fa fa-2x fa-bug
  • fa fa-2x fa-vk
  • fa fa-2x fa-weibo
  • fa fa-2x fa-renren
  • fa fa-2x fa-pagelines
  • fa fa-2x fa-stack-exchange
  • fa fa-2x fa-arrow-circle-o-right
  • fa fa-2x fa-arrow-circle-o-left
  • fa fa-2x fa-toggle-left
  • fa fa-2x fa-caret-square-o-left
  • fa fa-2x fa-dot-circle-o
  • fa fa-2x fa-wheelchair
  • fa fa-2x fa-vimeo-square
  • fa fa-2x fa-turkish-lira
  • fa fa-2x fa-try
  • fa fa-2x fa-plus-square-o

<li>
<p><span class="fa fa-2x fa-glass"></span></p>
<span class="glyphicon-class">fa fa-2x fa-glass</span>
</li>
<li>
<p><span class="fa fa-2x fa-music"></span></p>
<span class="glyphicon-class">fa fa-2x fa-music</span>
</li>
<li>
<p><span class="fa fa-2x fa-search"></span></p>
<span class="glyphicon-class">fa fa-2x fa-search</span>
</li>
<li>
<p><span class="fa fa-2x fa-envelope"></span></p>
<span class="glyphicon-class">fa fa-2x fa-envelope</span>
</li>
<li>

and so on ...
Components

Dropdown

<!-- dropdown start -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul>
</div>
<!-- dropdown end -->
Components

Breadcrumb

<!-- breadcrumb start -->
<h6>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</h6>
<!-- breadcrumb end -->
Components

Pagination

<!-- pagination start -->
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<!-- pagination end -->

<!-- pagination start -->
<ul class="pager">
<li class="disabled"><a href="#" class="btn btn-default">Previous</a></li>
<li class="active"><a href="#" class="btn btn-default">Next</a></li>
</ul>
<!-- pagination end -->
Components

Buttons

<!-- button start -->
<!-- Standard button -->
<p>
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<!-- button end -->
Components

Labels and Badges

Default Primary Success Info Warning Danger

Inbox 42

<!-- label start -->
<p>
<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>
</p>
<!-- label end -->

<!-- badges start -->
<p>
<a href="#">Inbox <span class="badge">42</span></a>
</p>

<p>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
</p>
<!-- badges end -->
Components

Alert

<!-- alert start -->
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div>

<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
<!-- alert end -->
Components

Progress Bar

40% Complete (success)
40% Complete (success)
20% Complete
20% Complete
60% Complete (warning)
60% Complete (warning)
80% Complete (danger)
80% Complete (danger)
35% Complete (success) and 20% Complete (warning) and 10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<!-- progress start -->
40% Complete (success)
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>

20% Complete
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>

60% Complete (warning)
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>

80% Complete (danger)
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>

35% Complete (success) and 20% Complete (warning) and 10% Complete (danger)
<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 progress-bar-striped" 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>
<!-- progress end -->
Components

Responsive Embed

<!-- responsive start -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
</div>
<!-- responsive end -->
Components

Wells

Look, I'm in a well!

Look, I'm in a large well!

Look, I'm in a small well!
<!-- wells start -->
<div class="well">
Look, I'm in a well!
</div>

<div class="well well-lg">
Look, I'm in a large well!
</div>

<div class="well well-sm">
Look, I'm in a small well!
</div>
<!-- wells end -->
Components

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<!-- typography start -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h4>h3. Bootstrap heading</h4>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h4>h3. Bootstrap heading <small>Secondary text</small></h4>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
<!-- typography end -->
Components

Codes

For example, <section> should be wrapped as inline.
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
For example, <code><section></code> should be wrapped as inline.
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Components

Grid

.col-md-2

These cases are perfectly simple and easy to distinguish.

.col-md-2

These cases are perfectly simple and easy to distinguish.

.col-md-2

These cases are perfectly simple and easy to distinguish.

.col-md-2

These cases are perfectly simple and easy to distinguish.

.col-md-2

These cases are perfectly simple and easy to distinguish.

.col-md-2

These cases are perfectly simple and easy to distinguish.

.col-md-8

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-4

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled.

.col-md-4

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-4

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-4

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-3

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-3

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-3

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-3

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-6

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.

.col-md-6

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.
<!-- grid start -->
<div class="row">
<div class="col-md-2"><h4>.col-md-2</h4>These cases are perfectly simple and easy to distinguish.</div>
<div class="col-md-2"><h4>.col-md-2</h4>These cases are perfectly simple and easy to distinguish.</div>
<div class="col-md-2"><h4>.col-md-2</h4>These cases are perfectly simple and easy to distinguish.</div>
<div class="col-md-2"><h4>.col-md-2</h4>These cases are perfectly simple and easy to distinguish.</div>
<div class="col-md-2"><h4>.col-md-2</h4>These cases are perfectly simple and easy to distinguish.</div>
<div class="col-md-2"><h4>.col-md-2</h4>These cases are perfectly simple and easy to distinguish.</div>
</div>

<div class="row">
<div class="col-md-8"><h4>.col-md-8</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-4"><h4>.col-md-4</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled.</div>
</div>

<div class="row">
<div class="col-md-4"><h4>.col-md-4</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-4"><h4>.col-md-4</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-4"><h4>.col-md-4</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
</div>

<div class="row">
<div class="col-md-3"><h4>.col-md-3</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-3"><h4>.col-md-3</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-3"><h4>.col-md-3</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-3"><h4>.col-md-3</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
</div>

<div class="row">
<div class="col-md-6"><h4>.col-md-6</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
<div class="col-md-6"><h4>.col-md-6</h4>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</div>
</div>
<!-- grid end -->
Components

Tables

class = table
# First Name Last Name Label Progress Detail
1 Mark Otto Primary
40% Complete (success)
2 Jacob Thornton Warning
80% Complete (success)
3 Larry the Bird Primary
50% Complete (success)

class = table table-striped
# First Name Last Name Username Label
1 Mark Otto @mdo Warning
2 Jacob Thornton @fat Warning
3 Larry the Bird @twitter Warning

class = table table-bordered
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

class = table table-hover
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

class = table table-condensed
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

class = table table-responsive
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<!-- table start -->
<table class="table table-condensed">
<caption>class = table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Label</th>
<th>Progress</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td><span class="label label-primary">Primary</span></td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</td>
<td><button type="button" class="btn btn-default">Default</button></td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td><span class="label label-warning">Warning</span></td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (success)</span>
</div>
</div>
</td>
<td><button type="button" class="btn btn-default">Default</button></td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td><span class="label label-primary">Primary</span></td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span class="sr-only">50% Complete (success)</span>
</div>
</div>
</td>
<td><button type="button" class="btn btn-default">Default</button></td>
</tr>
</tbody>
</table>

<table class="table table-striped table-condensed">
<caption>class = table table-striped</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td><span class="label label-danger">Warning</span></td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td><span class="label label-danger">Warning</span></td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td><span class="label label-danger">Warning</span></td>
</tr>
</tbody>
</table>

<table class="table table-bordered table-condensed">
<caption>class = table table-bordered</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

<table class="table table-hover">
<caption>class = table table-hover</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

<table class="table table-condensed">
<caption>class = table table-condensed</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

<div class="table-responsive">
<table class="table table-bordered">
<caption>class = table table-responsive</caption>
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<!-- table end -->
Components

Forms

Basic Form

Example block-level help text here.

Horizontal Form

Inline Form

  
<h4 class="sub-header">Basic Form</h4>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<h4 class="sub-header">Horizontal Form</h4>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>

<h4 class="sub-header">Inline Form</h4>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>  
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-warning">Sign in</button>
</form>
Components

Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<!-- list start -->
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>

<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>

<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<!-- list end -->
Components

Social Media icons

Icons 24px Style 1


Icons 24px Style 2


Icons 32px Style 3


Icons 32px style 3 round corner

Components

Payment icons

Components

Bubble Text

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

<!-- bubble start -->
<div class="bubbleleft">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</div>
<!-- bubble end -->
<div class="clear"></div>
<!-- bubble start -->
<div class="bubbleright">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</div>
<!-- bubble end -->
<div class="clear"></div>
<!-- bubble start -->
<div class="bubbletop">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</div>
<!-- bubble end -->
<div class="clear"></div>
<!-- bubble start -->
<div class="bubblebottom">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</div>
<!-- bubble end -->
<div class="clear"></div>
Javascripts Components

Modalbox

Javascripts Components

Scrollspy

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Javascripts Components

Tab

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel.


Javascripts Components

Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. 8-bit american apparel have a terry richardson vinyl chambray. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Javascripts Components

Collapse

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.
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.

Javascripts Components

Bootstrap Carousel


Javascripts Components

Owl Slideshow

You can view this owl slideshow (logo slider) sample by navigate to this index page Page
Javascripts Components

Product Shop Carousel

You can view this product shop carousel sample by navigate to this Shop detail Page
Javascripts Components

Slippry Carousel

You can view this slippry slider sample by navigate to this index page 03 Page
Javascripts Components

Scattered Carousel

You can view this slippry slider sample by navigate to this index page 04 Page
Javascripts Components

Counter

Sample of Counter Number

12,147
Javascripts Components

Count Down

  • 00

  • days :
  • 00

  • hrs :
  • 00

  • mins :
  • 00

  • secs

Javascripts Components

Google Map


Other Components

API's

hey-kids.3-singlepage use third-party API to integrate user using their social media account.
Because API is developed by their own programs, update and maintenance of API is not controlled by this template. Therefore use at your own risk.
Facebook API are coded in : assets/news folder, open and edit news-detail.php file, look for



<!-- facebook API -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v 3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); </script>
<!-- facebook API end -->

and also


<!-- /.facebook API -->
<p>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/"
data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</p>
<div class="fb-comments" data-href="http://www.bnrcreativelab.com/Hey Kids/news"
data-width="765" data-numposts="5" data-colorscheme="light"></div>
<!-- /.facebook API end -->

Other Components

Twitter API

Twitter API are coded in : assets/DATA-contents folder, open and edit 12-tweet.html and footer-contact.html file, look for



<?php
//Path to TwitterOAuth library
require_once("../assets/twitteroauth/twitteroauth.php");

//Configuration
$twitterID = "yourID";
$tweetNum = 1;
$consumerKey = "yourconsumerkey";
$consumerSecret = "yourconsumersecret";
$accessToken = "youraccesstoken";
$accessTokenSecret = "youraccesstokensecret";
if($twitterID && $consumerKey && $consumerSecret && $accessToken && $accessTokenSecret) {
//Authentication with twitter
$twitterConnection = new TwitterOAuth(
$consumerKey,
$consumerSecret,
$accessToken,
$accessTokenSecret
);
//Get user timeline feeds
$twitterData = $twitterConnection->get(
'statuses/user_timeline',
array(
'screen_name' => $twitterID,
'count' => $tweetNum,
'exclude_replies' => false
)
);
?>
<div class="tweet-box">
<div class="tweets-widget">
<ul class="list-unstyled tweet-list">
<?php if(!empty($twitterData)): foreach($twitterData as $tweet):
$latestTweet = $tweet->text;
$latestTweet = preg_replace('/http:\/\/([a-z0-9_\.\-\+\&\!\#\~\/\,]+)/i', '<a href="http://$1" target="_blank">http://$1</a>',
$latestTweet);
$latestTweet = preg_replace('/@([a-z0-9_]+)/i', '<a class="tweet-author" href="http://twitter.com/$1" target="_blank">@$1</a>', $latestTweet);
$tweetTime = date("D M d H:i:s",strtotime($tweet->created_at));
?>
<li class="tweet-wrapper">
<div class="tweet-thumb">
<span class="had-thumb"><a href="<?php echo $tweet->user->url; ?>" title="<?php echo $tweet->user->name; ?>"><img alt="" src="<?php echo $tweet->user->profile_image_url; ?>"></a></span>
</div>
<div class="tweet-content">
<h4 class="title" title="<?php echo $tweet->text; ?>"><?php echo $latestTweet; ?></h4>
<small class="meta"><?php echo $tweetTime; ?> - <span><span class="dsq-postid" rel="8286 http://www.techandall.
com/?p=8286"><?php echo $tweet->favorite_count; ?> Favorite</span></span></small>
</div>
</li>
<?php endforeach; else: ?>
<li class="tweet-wrapper">Tweets not found for the given username.</li>
<?php endif; ?>
</ul>
</div>
</div>
<?php
}else{
echo 'Authentication failed, please try again.';
}
?>
go to here to see how it works
Others

Sources and Credits

Copyright © 2016. All rights reserved. hey-kids.3-singlepage HTML Template design by bnrcreativelab.com
Privacy Policy | Terms & Conditions | Privacy guidelines | About Us.