Bootstrap Learning

Must Used Bootstrap Classes
class="lead"
class="col-lg-4-offset"
class="col-lg-4-pull"
class="col-lg-4-push"
class="text-left"
class="text-right"
class="text-center"
class="text-nowrap"
class="text-justify"
class="text-lowercase"
class="text-uppercase"
class="text-capitalize"
class="active"
class="success"
class="info"
class="warning"
class="danger"
class="input-lg"
class="text-hide"

Most Used Bootstrap tags
<abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<mark>
<code>
<small>
<em>
<blockquote>
<footer>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

UL LI
==================
<ul class="list-inline">
  <li>...</li>
</ul>

Table
=================
<table class="table table-striped">
  ...
</table>

Colors
@brand-primary: darken(#428bca, 6.5%);

Scaffolding
===================
@body-bg:    #fff;
@text-color: @black-50;

Links
=======================
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

Useful Bootstrap Classes

INLINE SUBHEADINGS
<small> around sub headings

Lead Body Copy
To add some emphasis to a paragraph, add class="lead". This will give you larger font size, lighter weight, and a taller line height.

STRIPED TABLE
By adding the .table-striped class, you will get stripes on rows within the <tbody>.

BORDERED TABLE
By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table.

HOVER TABLE
By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them.

CONDENSED TABLE
By adding the .table-condensed class, row padding is cut in half to condense the table. as seen in the following example. This is useful if you want denser information.

Form
Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

Image Responsive
img-responsive