07 Mar 2012 Bootstrap makes me look good
Before we begin, let me give you a quick background. I’m a web developer who likes to dabble a bit in UI design. The majority of the projects I work on are non public facing, so they are often without the aid of a graphic designer. This usually leads to the production of a fully functioning web app that looks like a mixed bag of CSS tutorials. Sounding familar?
Enter Twitter Bootstrap.
Bootstrap is an open-source, cross-browser collection of CSS and HTML conventions. It is essentially a front-end toolkit for rapidly developing stylish web applications. It covers everything from forms, typography, tables and buttons to layouts and dynamic components like tabs, menus and pagination. It is built on with the power of LESS and has support for many jQuery plugins (modals, dropdowns, alerts etc).
One of the strong points of Bootstrap is how easy it is to integrate into a project and use in conjunction with other technologies. To give you an example, my most recent project used Bootstrap in conjunction with display tag. Display tag is a JSP tag library for displaying tabled data, with built in column sorting and pagination. The integration between Boostrap and display tag was seamless. I only needed to set the CSS classes on the display table to use Boostrap CSS classes:
<display:table class="table table-striped table-condensed" name="results"> ... </display:table>
Bootstrap even took care of the table row stripping (although display tag has support for this too). Here is a picture of the result: Another thing I like about Bootstrap is that it makes use of custom HTML 5 data attributes to activate/link the majority of it’s dynamic content. For example, have a look at the code required to pop up a modal:
<a class="btn" data-toggle="modal" href="#theModal">Launch Modal</a> <div class="modal" id="theModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Super Cool Modal</h3> </div> <div class="modal-body"> <p>Some body text</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary">Save</a> <a href="#" class="btn">Close</a> </div> </div>
<ul class="nav"> <li class="dropdown active" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Listings <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/list/1.html">Update</a></li> <li><a href="/list/2.html">Create</a></li> <li><a href="/list/3.html">Delete</a></li> </ul> </li> <li class="dropdown" id="menu2"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"> Other <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/other/1.html">Reviews</a></li> <li><a href="/other/2.html">Users</a></li> </ul> </li> </ul>
Although I’m extremely pleased with Boostrap, there are a few concerns/issues that I have. The most obvious is that if you use Boostrap on all your projects, guess what all your projects are going to look like? I think the Twitter look and feel is very nice, but the novelty may wear off after a while. I know you can get around this by overlaying your own CSS customisations to the Boostrap core, but we are starting to head back into a mixed bag of CSS tutorials problem. Maybe to a lesser degree though, since we would have a solid CSS base (using LESS) to work off. Another issue I’ve found with Bootstrap, is that it doesn’t have native support for a date picker. This was unfortunate because our search UI required the user to enter a start and end date. Thankfully with a bit of googling I was able to find this little widget, which did the job fine. I’m pretty sure something like this will makes it’s way into Bootstrap soon.
As stated on the official website, Bootstrap is ‘built for and by nerds’. It allows me as a developer to create a gorgeous UIs in less time, which means a happy client and in turn a happy boss. Bootstrap makes me look good. So if you’re a front-end developer and have yet to use Bootstrap, I’d recommend giving it a shot.
Bram PeirsPosted at 05:08h, 18 May
The checkbox or image left of the date column in the image with your table. Is this implemented in bootstrap. I would like to use it.
Thanks in advance.
tablatronix (@tablatronix)Posted at 23:02h, 10 June
I like that secondary nav submenu on the table demo figure.
Is that custom ?
For a datepicker, you can use jquery ui and this bootstrap theme.
TheNightCoderPosted at 23:30h, 26 September
the first section of your article is one of the funniest things I’ve read in a long time. I know exactly what you’re talking about, and I just wanted to say thx for the great article.
ssamayoaPosted at 08:43h, 27 September
I been a JEE developer for the last decade and recently was moving my UI from JSF to ExtJS (nice C/S JS framework but UIs get very “loaded” like fat client application). A few days ago I found Bootstrap and now I’m rethinking on use JSF 2 + Bootstrap instead of ExtJS because it simplicity and elegance.
DanPosted at 01:21h, 29 September
Good luck getting bootstrap looking right with a header and a SCROLLABLE table. As soon as you have a scrollbar appear, the scrollbar will bleed into the header and mess up the formatting. See this: http://jsfiddle.net/Ph7GZ/10/
RyezkieyPosted at 18:40h, 11 June
hello master, may I ask for an example source code for http://shinetechblog.files.wordpress.com/2012/03/bootstrap-demo-31.png
pradeepPosted at 21:10h, 10 October
can i source code for the aboev screen