Bootstrap toolkit from Twitter : Overview

August 19, 2011 · Posted in Development 

Bootstrap can help you to build your sites faster offerring ready-to-use HTML/CSS code for different layout, buttons, forms. I got used to use such CSS-frameworks to save my time while building standard HTML layouts for my sites.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
Bootstrap is built with Less and was designed to work out of the gate with only modern browsers in mind.

More often I need layouts and forms with buttons.

Bootstaps has only 2 simple layouts:

Fixed layout – A basic 940px wide, centered container layout for just about any site or page.
Fluid layout – 2-columns. A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar.

But it is not enough for real apps. Often I need 3-columns pages.

Buttons.

Bootstrap has one type of buttons with rounded corners with differnt styles.

BUT the buttons are not round in IE8.

 

Alerts.

It has many types and styles of alerts. A great thing to use in your app.

 

 

Tags: ,

Comments

  • Anne

    Hi Max,
    I am looking for a good framework and thought I had settled on Bootstrap but it seems to be lacking a lot. Like fluid three column layouts. Have you found another framework that you like better than Bootstrap?

    Anne

  • Anonymous

    You are right. Bootstrap from Twitter has only a few examples for layout.

    I do CSS in my sites as follows:

    1. Layout
    Get CSS for layout from here:
    http://blog.html.it/layoutgala/

    For example, if you need fluid 3-column layout with fixed secondary columns then try this demo:
    http://blog.html.it/layoutgala/LayoutGala13.html

    but be careful to test that layout in different browsers.
    Also they have some little problems. For example, when you make the width of the page in browser very small – it breaks the second column and makes its width too small. The solution to this problem – add “min-width: XXpx;” to the style.
    So I had to fix it a little in my sites.

    Also, for layouts take a look at YAML framework.
    http://www.yaml.de/fileadmin/examples/index.html
    But most of their examples, have a fixed width of the page and I didn’t use YAML much in my sites.

    2. CSS for page elements
    Then use CSS for all elements from Twitter Boostrap.
    They have good structure in CSS code so you can just copy what you need.
    Usually, I copy CSS for forms, buttons, pagination, alerts/messages.

    3. Typography
    For a good typography for a text on page I use Blueprint Framework:
    http://www.blueprintcss.org/

    Here is the demo:
    http://www.blueprintcss.org/tests/parts/elements.html

    But I choose forms from Bootstrap in preference to forms from Blueprint.