My favourite parts of twitter bootstrap

I’m not that good at making my own visual design assets. So when I saw Twitter Bootstrap, it was love at first sight. Basically, it’s a library that gives you CSS and assets like buttons and images to design your website easily, and it includes a tweaked version of jquery for easy javascripting. It’s perfect for people who are not design or usability experts but still want to have the ability create something that looks amazing! Bootstrap is basically having your cake and eating it, too.

Twitter bootstrap is HUGE, but I’ll mention some of the things I did and that I enjoyed doing, in no particular order. (So, this isn’t a top 10, just features that I enjoyed)

  1. Tables
    Let’s admit it, we all need to present data in a table sometimes. Yes, abusing them is bad, but using them properly.. That should be fine.
    Bootstrap will style tables as long as you give them class=”table”. Personally, I like giving them a rounded border, and a hover state, so that when user mouses over a row the row changes colour, which is very handy for knowing which part you’re reading. You can do that with also giving your table table-bordered and table-hover class.
    Example:

            
    Student Name UserName Mark
    Errietta Kostala U1250207 A++

    And there you go, pretty table!
    Result:

  2. Buttons.
    Not only does bootstrap give readymade buttons in all shapes and sizes, but did you know you can do THIS?

    I loved it when I saw that. Doing that is pretty easy:

            

    You can even change

       

    To this:

       

    And get a drop-up menu instead!
    Note:: I spent 1 hour wondering why this wasn’t working properly – turns out I forgot the

    
    

    . Don’t be like me.

  3. Modals
    A lot of JS libraries can do modals and dialogs, but I’ve found twitter bootstrap to be the most headache-free way. These are things I want to do quickly and efficiently, and move on to more important things. So having it the easy way isn’t so bad.
    Creating your modal box requires specific HTML syntax:

        
    

    If you read the docs you will find that you can call your modal and customize its behaviour with javascript as well as just HTML code.
    That is the easiest way to do it:

        Log In
    

    That’ll toggle your modal!

To sum up, bootstrap is awesome. It makes front-end development a piece of cake and I recommend it to anyone whose had trouble in the past (I know I’ve had) designing a UI to go with their personal project with that awesome backend.

We <3 bootstrap!

One thought on “My favourite parts of twitter bootstrap

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.