BootStrap

Basics
by www.pluginvalley.com

Visit Us for Daily Tips & Tutorials from Developers!

www.pluginvalley.com
 Inside this eBook:

1. What is Bootstrap?
2. Bootstrap for Joomla 3
3. Working with Bootstrap
4. Using Bootstrap Components
5. Create a Simple Site with Bootstrap
6. Bootstrap Buttons
7. Tabs with Bootstrap
8. Creating Dropdowns with Bootstrap
9. Tooltips
10. PopOver
11. Modals
12. Carousel Sliders
13. Bootstrap Collapse - Accordion
14. Using Labels and Badge
15. Creating Progress Bars with Bootstrap
What is Bootstrap?
Bootstrap is a free collection of tools for creating websites and web
applications. It is simply a sleek, intuitive, and powerful mobile first
front-end framework for faster and easier web development.

Bootstrap contains HTML and CSS-based design templates for typography,

forms, buttons, navigation and other interface components, as well as
optional JavaScript extensions. Bootstrap is developed by the team at
Twitter and first time in August 2011 released by Twitter as an as open
source project. In a very short time it became popular and in February
2012 it was the most popular project at GitHub

Explaining Bootstrap

Helping oneself, often through improvised means is bootstrapping, so it’s

no wonder this open-source Javascript framework has been named aptly
by the team at Twitter with enough wits and technical know-how to
combine HTML, CSS and Javascript codes all into one package. The combo
has been designed keeping in mind to ease up building UI (user interface)
components, so it must not come as a surprise that Bootstrap also
embraces a full HTML5 and CSS3 support.

Most Important Features

Bootstrap's one of the most important feature is being compatible with

the latest versions of all major browsers. It gracefully degrades when
used on older browsers such as Internet Explorer 8.

Since the Bootstraps version 2.0 it also supports responsive design. That
means the layout of the web pages adjusts dynamically, taking into
account the characteristics of the device used (desktop, tablet, mobile
phone).

Another important feature is Bootstrap's LESS Style Sheets. Less

StyleSheets implement the various components of the
toolkit.Bootstrap.less includes the components stylesheets and the
developers can adapt the Bootstrap file itself, selecting the components
they wish to use in their web project.

Customize option, that comes since the version 2.0 in the

documentation. Developers can choose the desired components and can
adjust their values of various options to their needs.

Bootstrap provides set CSS stylesheets, In addition to the regular HTML

elements Bootstrap provides other commonly used interface elements
such as buttons with advanced features, thumbnails, advanced
typographic capabilities, labels, a progress bar and warning messages.

Bootstrap also comes with several JavaScript components. This

components are jQuery Plugins such Tooltip, Popover, Modal, Dropdown,
Tab, Alert, Button, Collapse, Scrollspy, Carousel and Typeahead.
Bootstrap Joomla3
Joomla 3.0 is coming together with Bootstrap

Using Bootstrap within Joomla 3.0

To start with, it’s the Joomla User Interface (JUI) library, a common set of
shareable tools built on bootstrap.
This removes the extra labor developers and designers had to undergo
about innovating outside the core or using repetitive codes; the inbuilt
Javascript and CSS makes loading time virtually ZERO.
A shared-community effort in its real sense, the variation and creativity
makes for a fabulously connected user experience. Additionally, the
Joomla 3.0 version of bootstrap has been watered down enough to make
it far more easy-flowing than the cramped 2.5 styles, yet it is a single
component rather than two completely separate ones.

Something for the extension developers

This is about a rather complicated question, which is - The average time
requirement for converting the basic interfaces to bootstrap.
For something as simple as converting a table-class from admin-list to
class table might get very complex, but component developers loading
their own themes and frameworks on top of Joomla shall feel super
excited about avoiding the pain completely.
A separate UI library and framework requires greater support that eats
into the features of a project; however, with Bootstrap, all that’s needed
is focusing just on the code and make use of the inbuilt UI.

Component developers find Bootstrap to turn Joomla 3.0 into an SDK

(software development kit).

Bootstrap turns Joomla 3.0 mobile friendly both for visitors and
administrators; it is by and large the most common mobile framework.
Bootstrap is consistent; its uniform interface suits all extensions, thus
removing the need for multiple and different interfaces for the Joomla
admin area.
Bootstrap frees the developers from reinventing the basic interfaces and
takes the burden up on its own.
Bootstrap is a really tiny inclusion, but only when no independent
libraries are loaded. This ensures every component doesn’t load its own
thing but use the ones that came along.
Working with Bootstrap
Working with Bootstrap is not so difficult! As a first step you must prepare
your computer with a local server. You can simply download and install
XAMMP from Apache Friends Website or WAMP Server from Wamp Server
Website

After preparing your local host visit Bootstrap's GitHub Page and
Download the latest version of Bootstrap.

After downloading the Bootstrap-Master create your working directory at

your local server's htdocs folder and extract the file you downloaded.
After completion of extract process open bootstrap/dist folder and you
will see 3 main folder which gives the css, js and fonts folders that are
the main folders we will often check for Learning Bootstrap better.

Now we are ready to start creating our first page with Bootstrap. Open
your favorite editor, e.g. Notepad++. However you desire, if you want
start to create a HTML document yourself from scratch or if you are not
sure which elemets you need to include, you can also start with a
Bootstrap Template from BootStap's website!

File Structure of Bootstrap

After Extracting the Boostrap-master on your local host as i mentioned

above the most important part of the folders is the dist folder. This folder
has the css, js and the fonts folders that we will need at each project.

May be you are a bit confused, the master you downloaded has the source
code of the bootstrap too but the dist folder includes everything you need
as compiled. When we start a new project just move the folders css, js,
fonts from dist folder.
When you open these folders you will see the file structure as below.
dist/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Example Pages in Bootstrap

You can visit via your browser the example pages of the Bootstrap you
have installed on your local server.
http://localhost/bootstrap/docs/examples/ Example Folder has sub-
folders below and you navigate and analyze the code and usage of the
code and resources.

• blog
• carousel
• cover
• dashboard
• equal-height-columns
• grid
• jumbotron-narrow
• jumbotron
• justified-nav
• navbar-fixed-top
• navbar-static-top
• navbar
• non-responsive
• offcanvas/
• rtl
• screenshots
• signin
• starter-template
• sticky-footer-navbar
• sticky-footer
• theme
• tooltip-viewport
Using Bootstrap
Components
Bootstrap Components are the elements that makes Bootstrap
Framework powerful, easy to use and popular in the web.
Simply a Bootstrap Component is Javascript Snippet that gives you the
advantage of creating web elements without writing any sing line of
jQuery Code. Bootstrap Components is a perfect advantage especially for
the sitebuilder who has no jQuery knowledge and for all of us to enhance
the turnover time.

Installing Bootstrap Javascript Components: you can include Bootstrap

Components easily, it is totally your choice to install them one by on or
all in one time. Totally depended on your project's conditions and the
requirements. If you want to include all in one you must use bootstrap.js
or the minified bootstrap.min.js or if you want to include by one by one
you can use Bootstrap's individual *.js files, if you downloaded bootstrap
open the folder called "js" and you will see the single javascript
components there.

Developers Note: For Simple Transition Effects, If you are including the
components one by one you must include transition.js once alongside the
other JS files. If you're using the compiled (or minified) bootstrap.js, you
do not need to include transition.js

What are the Main Bootstrap Components

Are you already downloaded the Bootstrap, then open the folder called
js. You will see there some .js files. These are the main javascript
components of the Bootstrap. Shortly:

01 Modal - js/modal.js:
Modals are streamlined, but flexible, dialog prompts with the minimum
required functionality and smart defaults.
02 Dropdown - js/dropdown.js:
You can easily add dropdown menus to nearly anything with modal.js
plugin, including the navbar, tabs, and pills.
03 Scrollspy - js/scrollspy.js:
Scrollspy is for automatically updating nav targets based on scroll
position.

04 Tab - js/tab.js:
With the tab.js you can add quick, dynamic tab functionality to transition
through panes of local content, even via dropdown menus.

05 Tooltip - js/tooltip.js: Bootsrap Developers added nice and cool

tooltips by inspiring jQuery.tipsy plugin written by Jason Frame. You can
simply add tooltips to any text and image by using tooltip.js

06 Popover - js/popover.js:
When you want to show a secondary information as seen on iPad devices
and instead using the tooltips you can use popover to add small overlays
of content

07 Alert - js/alert.js:
You can add removable alerts by using alert.js

08 Button - js/button.js: That is amazing because you can do much more

with buttons, controlling button states, creating button create groups of
buttons for more components like toolbars is not a problem anymore :)

09 Collapse - js/collapse.js: Collapse will give you advantage to apply

the styles and flexible support for the collapsible components like
accordions and navigation. Developers Note:You need to include
transition.js when you are using collapse!

10 Carousel - js/button.js:
You can create carousels with sliders, navigational options, and many
more options for your carousel sliders.

11 Affix - js/affix.js:
You can use affix to show the current item at navigational menus.
Developers Note: you must provide CSS for the positioning of your
content when you are using affix.js
Create a Simple Site
with Bootstrap
Creating a Simple Site with Bootstrap is only a few steps. In this tutorial
we will see which files we need to move in our first bootstrap project and
how to link them.

In the previous tutorials we have learned the Workig with Bootstrap and
the File Structure. So we know basically which folders and the files we
need to use in our first project.

First of all we need to create a folder in our local host. I will call that
folder myfirstsite. After creating that folder i move from Bootstrap-
master which i downloaded from Get Bootstrap Site or the Bootstrap's
GitHub Page

After extracting the zipped file all i need is the folders and the files from
the dist folder.

Step by Step Creating First Boostrap Site

First of all create your working folder and move the folders from
bootstrap-master's dist folder and you will have a structure as below.

localhost/
└── htdocs/
└─── myfirstsite/
├── js/
├── css/
├── fonts/
└── index.html

In the myfirstsite folder i created an empty index.html file. Now i will

add the required files step by step to index.html

01 As a first step after creating the working folder and the index.html i
create the top of the document
As i define the document type and the html language at the top of the
index.html
!DOCTYPE html
html lang="en"

02 In the second step Create the head section and add the required Meta
Tags. character set, HTTP-EQUIV attribute defining control the action of
browsers. viewport meta tag with the content width=device-width and
initial-scale=1 will match the site layout width to the device width when
the document opened site layout at 1:1 scale.

charset="utf-8"
http-equiv="X-UA-Compatible" content="IE=edge"
name="viewport" content="width=device-width, initial-scale=1"

03 After this i add bootstrap's css file and 2 external files to help the site
work properly. After i close the head section and create the body at the
next step. You can view that part when you download the sample
index.html i created.

04 You can write to body section what ever you desire but just before
closing the body tag do not get to add latest compatible jQuery library
and the js/bootstrap.min.js which has all components compiled. We add
this 2 files at the end of the index.html files for a faster loading site.

05 You can download the myfirstsite i created Here

and see the index.html more detailed.
Learning Buttons
You can do a lot more with Bootstrap Buttons. After Learning Bootstrap
Buttons we will see that we can control the button states, create the
groups of buttons for more components like toolbars and others.

Buttons are only used for actions while hyperlinks are to be used for the
objects. If you create a download button, "Download" should be a button
while "recent activity" should be a link.
Styles of the Buttons can be applied to anything by applying the class btn.
In the same time you can apply this class only to a and button elements.

Main Javascript file for buttons is buttons.js but as we mentioned using

Using Bootstrap Components Tutorial if you're using the compiled (or
minified) bootstrap.js, you do not need to include buttons.js

Creating Your First Button with Bootstrap & Base Styles

For creating a button in your Bootstrap site all you need to do is adding
class="btn" to "button" or "a" elements. Below you can see a simple button
created by applyin btn class.

Button States, Sizes and Style

There are 4 main states, 3 Sizes

01 Active: by applying class="btn active" Small Button: you need to

apply class="btn btn-small"
02 Hover: by applying class="btn :hover" Mini Button: you need to apply
class="btn btn-mini"
03 Focus: by applying class="btn :focus" Large Button: you need to apply
class="btn btn-large"
04 Disabled : by applying disabled

Styles
There are 5 Main Styles
01 Success Style: You need to apply class="btn btn-success"
02 Info Style: You need to apply class="btn btn-info"
03 Danger Style: You need to apply class="btn btn-danger"
04 Warning Style: You need to apply class="btn btn-warning"
05 Inverse Style: You need to apply class="btn btn-inverse"

Using Data Attributes with Buttons

You can use data attributes and control button states, create groups of
buttons for more components like toolbars

For the working code please visit:

http://www.pluginvalley.com/tutorials/bootstrap-tips-tutorials/223-
learning-bootstrap-buttons.html
Creating Tabs
Creating Tabs with Bootstrap is quite easy. All we need to know is mostly
about the mark-up. When we are creating Tabs with Boostrap we must
create 2 separate sections: Navigational Section and Panes to carry the
content

We can also add transition through panes or we can simply add other
elements to the navigational section such dropdown menus. As we
mentioned since the beginning hence the required javascript comes with
bootstrap.min.js. After including js and css files all we need to do is
adding the correct markup for creating the tabs on our web pages.

Creating Your First Tab with Bootstrap.

We create two different sections, one for the tabs navigation and the
other one is for the container of the contents as we call Pane. We can
use the the code sample below and create navigational area of the tabs.
Lets create first the navigational section by the ul ve li elements

<!-- Nav tabs -->

<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Now lets read the code; as you see we added nav and nav-tabs. These
are the required classes we add to ul element. And after we need to use
data attributes data-toggle at the a elements which inside the li
elements.

Another important point you need to care about the links is href
attributes are linked to pane's ( which will see just later )ids.

After completing the the navigational section now we create the panes.
Navigational tabs are linked to the panes and when we click the tabs
related pane becomes active. with different transition effects.

<!-- Tab panes -->

<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>

This is also quite easy to understand and create. First of all we create the
main container of the panes with the class tab-content and inside the
tab-content section we create the panes with the class tab-pane And
each tab-pane should carry the id name same as navigation li a
href="#SAME_WITH_PANE_ID
Creating Dropdowns
Creating Dropdodwns with Bootstrap is also very very easy. Again the most
important part is about understanding the mark-up well. We can create
navigational menus and dropdowns with similar syntax. Dropdowns can be
used in navigational bars or independent div areas.

We will again use the data attributes for creating the drop downs and
binding them to hidden menu. When we click to the visible menu item
which has data-toggle=dropdown javascript will add to the hidden menu
.open class and to the item we click adds the -backdrop. And when we
re-click to the same menu item javascript return the everrything to the
default.

Creating Your First Dropdown Menu with Bootstrap.

We add data-toggle=dropdown to the link or the button to toggle a
dropdown menu and we use the data-target attribute instead of
href="#".

<div class="dropdown">
<a data-toggle="dropdown" href="#"> Click Me to View the Links </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#">Third Link</a></li>
</ul></span>
</div></span>
Tooltips
Creating Tooltips with Bootstrap is very simple . You can create on any
html element, in any part of the content by adding only 3 attributes to
any text or image you desired.

For creating the tooltip you need to add following attributes to the html
element:

first of all data-toggle, for position of the tooltipdata-placement and

for the content of the tooltip title

At that part i like to show you a basic sample and 1 tooltip on an image
with inside html. You can also create more complicated samples. It is
totally depended on your imagination.

When you want to use html in tooltip content you need to add 1 more
attibute: data-html="true"

Creating ToolTip with Bootstrap

Basically Bootstrap Tooltip required markup is only a data attribute and

title on the HTML element you wish to have a tooltip. Default position is
always Top and you can change the position with data-placement
attribute. Below you can see the markup for creating a tooltip

<button type="button" class="btn btn-default" data-toggle="tooltip" data-

placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-

placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-

placement="bottom" title="Tooltip on bottom">Tooltip on
bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-

placement="right" title="Tooltip on right">Tooltip on right</button>
PopOver
Bootstrap PopOver gives us option of adding quick informative areas on
any html element. When you want to create a popover all you need to is
adding required .js file popover.js and the data attirbutes

Firstly fire the popover with attribute: data-toggle="popover" and then

container attribute, data-container="body", for the position of the
popover data-placement, default position is top and the popovers
content data-content

You can see below a basic sample and 1 popover on an image with inside
html. You can also create more complicated samples. It is totally
depended on your imagination.

When you want to use html in tooltip content you need to add 1 more
attibute: data-html="true"

Creating PopOver with Bootstrap

<button type="button" class="btn btn-default" data-container="body" data-
toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel
augue laoreet rutrum faucibus.">
Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-

toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel
augue laoreet rutrum faucibus.">
Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-

toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-

toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel
augue laoreet rutrum faucibus.">
Popover on right
</button>
Modals
Bootstrap Modals give us chance to enrich our site user's experience or to
add more functionality to give users to serve any information in a better
way. When you want to create a modal all you need to is adding
required .js file modal.js and the data attributes

For an example, you want a modal window is opened when a user clicks
to a button, you must add to the button this 2 attributes defiitely. Firstly
fire the modal with attribute: data-toggle="modal" and then target
attribute, data-target="#your_modal_id".

Modal window you like to show must have a Dialog, Content, Header,
Body and the footer sections

You can analyze the code below and see how a modal window is
structured.

Creating Modal with Bootstrap

<!-- Button trigger modal -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->

<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">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
 </div>
</div>
</div>
</div>

When you are creating the modals you must care of the
followings:

• Be sure not to open a modal while another is still visible. Showing

more than one modal at a time requires custom code.
• Always try to place a modal's HTML code in a top-level position in
your document to avoid other components affecting the modal's
appearance and/or functionality.
• You must make modals accessible, tha means you need to add
role="dialog" to .modal, aria-labelledby="yourModalLabel" attribute
to reference the modal title, and aria-hidden="true" to tell assistive
technologies to skip the modal's DOM elements.
• Additionally, you may give a description of your modal dialog with
aria-describedby on .modal
Adding Carousel Sliders
Bootstrap Carousel Sliders helps us to create a nice slider that cycling
through elements like a carousel. When you want to create a carousel all
you need to add required .js file carousel.js and the related data
attributes

Carousel Slider markup has 3 main sections

• Indicators
• Wrapper for Slides and
• Controls

And please note that the transition animations for the Carousel sliders are
not supported in Internet Explorer 8 & 9

It is because the Bootstrap uses for the animations the CSS3 unfortunately
Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus,
there are no slide transition animations when using these browsers and
the jQuery-based fallbacks for the transitions are not included in
Bootstrap.

Bootstrap Carousel Slider Markup

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
 <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

You can also add optionally captions underneath the sliding elemens by
the following markup

<div class="item active">

<img src="..." alt="...">
<div class="carousel-caption">
<h3>Title</h3>
<p>Some Text</p>
</div>
</div>

With the javascript when you call the carousel with $

('.carousel').carousel() you can use data attributes:
• Interval
• Pause
• Wrap
Collapse – Accordion
Bootstrap Collapse or by another saying Bootstrap Accordions are
extremely useful HTML Elements when you have a long content to
categorize and show in a better way by adding a good user experience!
When you want to create a collapse element on your Bootstrap Sites all
you need to add required .js file collapse.js and the related data
attributes

A Collapse Element Also requires the transitions plugin to be included!

Carousel Slider markup has 3 main sections

Panel Group Div

Panel Div
Panel Heading
Panel Title
Collapseble Element & Its Body

And please note that you can also use the plugin without the accordion markup.
You can create a button toggle which expands and collaps of another element.
Bootstrap Collapse - Accordion Markup

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

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<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
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
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
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
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.
</div>
</div>
</div>
</div>
Labels and Badge
Bootstrap Labels and Badge help us to highlight any content and improve
the readability of the content.

Creating badges and the labels are not so difficult. All you need to do is
adding some new classes to the HTML of your bootstrap site.

You can check the samples below and see how to create labels and the
badges easily.

All you need to do is adding the class name: badge for the badges and the
class name: label for the labels.

Bootstrap Label Markup

<h1>Usage of Label with h1 Heading <span class="label label-default">Sample Label</span></h1>

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

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

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

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

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

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

Progress Bars
We can use Bootstrap Progress Bars to show any kind of process
completed part / Remaining part or level of something, e.g. you can use
for showing your knowledge or expertize on any subject.

For Creating Progress Bars all you need to do is adding some the area
with the class called progress and progress-bar classes to the HTML of
your bootstrap site.

You can add to your progress bars a label shows the completed
percentage or you can also customize progress bars by adding some of the
same button and alert classes for consistent styles.

You can also use Progress Bars as Striped, Animated, Stacked You can
check the samples below and see how to create Progress Bars with and
without labels easily.

Creating Progress Bars with Bootstrap

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

Sample with Label

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

Alternative Usage of Progress Bars

<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>
<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>
<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>
<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</span>
</div>
</div>

Striped Progress Bars

<div class="progress progress-striped">

<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>
<div class="progress progress-striped">
<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>
<div class="progress progress-striped">
<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>
<div class="progress progress-striped">
<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>
Animated Progress Bars

<div class="progress progress-striped active">

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

Stacked Progress Bars

<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>

for sample codes and live examples visit:

http://www.pluginvalley.com/tutorials/bootstrap-
tips-tutorials.html

Visit Us for Daily Tips & Tutorials from Developers!

www.pluginvalley.com