Twitter Bootstrap provides framework for quickly building modern looking, responsive web sites.

Wikidot has integrated this framework by allowing us to create custom layouts combining standard HTML5 markup along with some special "Wikidot modules" so we can use standard Wikidot elements like top and side navigation, page tags, breadcrumbs, page titles and page content.

In simple terms, Bootstrap is a 12-column, fluid grid system that allows you to get very creative with the layout of your content. Think of your layout in terms of rows and columns where you define how many columns you want your content to span. For example, this code will create 3 simple columns that will rearrange themselves into a single column as the browser window gets smaller.

[[div class="row"]]
[[div class="col-sm-2 alert-info"]]
= 2 column span
[[div class="col-sm-6 alert-danger"]]
= 6 column span
[[div class="col-sm-4 alert-info"]]
= 4 column span

2 column span

6 column span

4 column span

The best way to fully understand all of the features and options that Bootstrap provides to to read the CSS section on the Bootstrap Web Site.

Enabling Bootstrap for Your Site

to do…

Basic Concepts

to do…

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License