Hello, World Bootstrap coding Examples

Table of Contents

Content


Form Example follows



Label Example follows


Default Primary Success Info Warning Danger

Progress bar Example follows


60% Complete

Dropdown Example follows



Button Example follows



Toolbar Example follows


...
...
...
...

Button Examples follow



Split Button Examples follow



Large Button Example follows



Small Button Example follows



Extra small Button Example follows



Drop up button examples follow



Input group example follows


@
@example.com
$ .00

Another Input group example follows



A third Input group example follows



2 row with 3 Thumbnails example follows


Gioia

Article 1

Description Optional

Home View Picture

Gioia

Thumbnail label 2

Paragraph Text

Button Button

Gioia

Thumbnail label 2

Paragraph Text

Button Button

Gioia

Thumbnail label 2

Paragraph Text

Button Button

Gioia

Thumbnail label 2

Paragraph Text

Button Button

Gioia

Thumbnail label 2

Paragraph Text

Button Button

...

Single row Thumbnail with one example follows


...

Thumbnail label

Paragraph Text

Button Button


?? Thumbnail example follows


...
...
...
...
60% Complete
60%
0%
2%
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
45% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
.col-sm-4
.col-sm-4
.col-sm-4

Hello World!

Resize the browser window to see the effect.

.col-sm-3
.col-sm-6
.col-sm-3

Hello World!

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 768px wide.

.col-sm-4
.col-sm-8

Hello World!

Resize the browser window to see the effect.

.col-sm-8
.col-sm-6
.col-sm-6
.col-sm-4

Hello World!

Resize the browser window to see the effect.

.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
.col-xs-6 .col-md-10
.col-xs-6 .col-md-2
.col-xs-6
.col-xs-6

Hello World!

Resize the browser window to see the effect.

.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
.col-xs-6 .col-sm-8 .col-lg-10
.col-xs-6 .col-sm-4 .col-lg-2
.col-xs-6
.col-xs-6

Hello World!

Column 1
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
Column 2
Column 3
Column 4

Offsetting Columns

Resize the browser window to see the effect.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

Push and Pull

Resize the browser window to see the effect.

.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4

Table

The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

# Firstname Lastname Age City Country
1 Anna Pitt 35 New York USA

Rounded Corners

The .img-rounded class adds rounded corners to an image (not available in IE8):

Gioia

Rounded Corners

The .img-rounded class adds rounded corners to an image (not available in IE8):

Gioia

Push and Pull

Resize the browser window to see the effect.

.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4