WebCodeGeeks -- Tutorial:Learn Bootstrap Quickly
Heading Classes
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
More Typography Classes
This is a marked text.
This text appears deleted.
This is a strikethrough text.
This is a inserted text.
This is underlined text.
This is a small text.
This is italic text.
This is bold text.

This is effect of .text-upperclass class

This is effect of .text-lowercase class

This is how .text-capitalize works

More Typography Classes

This is the effect of .text-left class

This is the effect of .text-right class

This is the effect of .text-center class

This is the effect of .text-justify class

This is the effect of .text-nowrap Class

More Typography Classes
Lists Ord.
  • One
  • Two
  • Three
Lists Un.
  1. One
  2. Two
  3. Three
Code CSS Classes
This is a demonstration of the code Classes
using which we can display code inline with the 
code tags like so.
int i = 0;
Additionally we can show keyboard shortcuts with the kbd tags
as in
Use 
Ctrl+c
 to copy
To show the use of variables we can write so
y = x + 5
Sample output can be shown using samp tags
The square of 2 is 4
This entire section has been wrapped in pre tag to
indicate that it is pre formatted text.
                                
Html Widgets
Example of a Basic Table decorated with .table class
Serial #Planet NameNumber of Moons
1Mercury0
2Venus0
3Earth1
4Mars2
Example of a Basic Table decorated with .table.table-striped class
Serial #Planet NameNumber of Moons
1Mercury0
2Venus0
3Earth1
Html Widgets
Example of a Table decorated with .table.table-bordered class
Serial #Planet NameNumber of Moons
1Mercury0
2Venus0
3Earth1
4Mars2
Example of a Basic Table decorated with .table.table-condensed class
Serial #Planet NameNumber of Moons
1Mercury0
2Venus0
3Earth1
Form Controls -- Simple Form
Inline Form for screen size till 768px
Horizontal form decorated with .form-horizontal class
Helper Classes & Utilities

This is a demo of the many contextual colors provided by Bootstrap to communicate additional context using colors as well.

This is muted text.

While this one indicates success

This is what simple informational message looks like.

Danger!

This is primary colored text.

Warning!

Helper Classes & Utilities

This is a demo of the many contextual colors provided by Bootstrap to communicate additional context using colors as well. Here they are applied as Background color instead of text color.

This is muted text.

While this one indicates success

This is what simple informational message looks like.

Danger!

This is primary colored text.

Warning!