Bootstrap

Twitter Bootstrap CSS Framework
Bootstrap (front-end framework) - Wikipedia - http://getbootstrap.com/

"Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the most popular project on GitHub and has been used by NASA and MSNBC among others."

"Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden."

Written in: HTML, CSS, LESS and JavaScript

Install
VERSION=3.3.7 wget https://github.com/twbs/bootstrap/releases/download/v${VERSION}/bootstrap-${VERSION}-dist.zip -O bootstrap-${VERSION}-dist.zip unzip bootstrap-${VERSION}-dist.zip ln -s bootstrap-${VERSION}-dist bootstrap


 * 1) wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip -O bootstrap-3.3.6-dist.zip
 * 2) unzip bootstrap-3.3.6-dist.zip
 * 3) ln -s bootstrap-3.3.6-dist bootstrap

Usage
 # OR 

Bootstrap Getting Started
Getting started · Bootstrap - http://getbootstrap.com/getting-started/

CSS · Bootstrap - http://getbootstrap.com/css/

--

Precompiled Bootstrap

Bootstrap CDN:







Bootstrap Examples - http://getbootstrap.com/getting-started#examples

Minimal Example: <!DOCTYPE html> Bootstrap 101 Template  

Hello, world!

 

Customizing Bootstrap - http://getbootstrap.com/getting-started/#customizing

div - scaffolding
Note: The default Bootstrap grid system utilizes 12 columns

Basic grid: ...      ...

center container
Easily center a page's contents by wrapping its contents in a .container. Note that, due to padding and fixed widths, containers are not nestable by default. ...

text alignment
Left aligned text. Center aligned text. Right aligned text.

pre
Pre auto wraps long text.

For vertical scrolling: (max height 340px) &lt;pre class="pre-scrollable"> ... &lt;/pre>

To enable horizontal scrolling create a new class: .pre-x-scrollable { overflow: auto; word-wrap: normal; white-space: pre; }

or just override the base (bad idea) pre { overflow-x: auto; } pre code { overflow-wrap: normal; white-space: pre; }

tables
Add .table class to &lt;table> and add .table-striped to get row stripping.  

Creating a fixed layout grid 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 8 Column 4 Column 4 Column 4 Column 4 Column 6 Column 6 Column

Fluid grid: ...          ...           ...       ...