The Spell of Twitter Bootstrap

Small introduction

Spell:
Download thy bootstrap, create rows and cols and amaze your eyes.

What is Twitter Bootstrap?

It’s a free open-source framework for designing sites and web-applications mostly. Has a collection of CSS Classes that put together by the rules you find in the documentation, you can create a pretty, well-structured and proportioned interface.

Why is it called Twitter Bootstrap?

First called Twitter Blueprint, it is a Framework rather than a library and was created by Twitter for internal use, to have a consistency across internal tools. Later on, they decided to go open source… and the web changed since then.

The Spell of the Grid System

It allows you to create rows and columns in which you can insert your content.

The Grid System is made of three things:
1. The container
2. Rows
3. Columns

Container has Rows. Rows have Columns. Columns have content.

  1. The container holds rows and columns. You get a container by putting a div with “container” class and you get all your content wrapped.
  2. A row is a wrapper for columns. By default, container has a padding of 15 pixels. Putting a row inside a container, you nullify this containers padding because a row has a margin of -15px (left and right); and you get a row fully stretched into the container
  3. Columns. A row has 12 fully virtual columns. One of the column types is: col-lg-12. By putting a column of this type inside a row, you get a columns with the width of a row. By putting two col-lg-6 into a row you get 2 equal columns.

Small spell example:

Page schema for a bootstrap page

In case you are passionate about HTML/CSS you might find Twitter Bootstrap interesting mostly because of some simple reasons:
 — it is self-adaptable to any resolution;
 — it is modern and updated very often;
 — it gives you that modern, clear, flat, fluent interface you need.