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)
-
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:<table class="table table-bordered table-hover"> <tr> <th>Student Name</th> <th>UserName</th> <th>Mark</th> </tr> <tr> <td>Errietta Kostala</td> <td>U1250207</td> <td>A++</td> </tr> </table>And there you go, pretty table!
Result:
![]()
-
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:<div class="btn-group"> <button class='btn'> <i title='Next page' class='icon-forward'></i> </button> <button class="btn btn-dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu "> <li > Page 1 </li> <li> Page 2 </li> </ul> </div>You can even change
<div class="btn-group">
To this:
<div class="btn-group dropup">
And get a drop-up menu instead!
Note:: I spent 1 hour wondering why this wasn’t working properly – turns out I forgot the<!DOCTYPE html>
. Don’t be like me.
-
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:<div id="login" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Log In</h3> </div> <div class="modal-body"> <p>Please enter your information to log in to your account.</p> <form action="/login" method="post"> Username: <input type="text" name="username" /><br/> Password: <input type="password" name="password" /><br/> <input type="submit" value="Log in!" /> </form> </div> </div>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:<a href="#login" role="button" class="btn" data-toggle="modal">Log In</a>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!