Twitter Bootstrap 2.0 was recently released. They’ve provided an upgrade guide, but it doesn’t list every detail you may have to change. Here’s a list of the things I had to update to get a similar look:
CSS
I added a reference to bootstrap-responsive.css. I’m not sure this really mattered for me, but you never know!
Nav bar
The navbar markup had changed a bit, from:
<div id="navbar" class="topbar"> <div class="fill"> <div class="container"> <a class="brand" href="#">App name</a> <ul class="nav"> ... </ul> </div> </div> </div>
to:
<div id="navbar" class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="">App name</a> <div class="nav-collapse"> <ul class="nav"> ... </ul> </div><!--/.nav-collapse --> </div> </div> </div>
Grid
The grid layout has changed, from 16 columns to 12.
Tables
.condensed-table is no more, you need .table & .table-condensed
Buttons
The button styles are now prepended with btn e.g. for a dangerous button:
<button class="btn btn-danger">Watch Out!</button>
Alerts
The script has been renamed to bootstrap-alert.js (from bootstrap-alerts.js). The css has changed a bit as well, from:
<div id="alert" class="alert-message error"></div>
to:
<div id="alert" class="alert alert-error"></div>
And the close button has changed from:
<a class="close" href="#">x</a>
to:
<a class="close" data-dismiss="alert">x</a>
(thanks to this article for the tip!).
And finally…
Forms
The default form styling has changed to a “stacked” look, and the required markup has changed as well. To get back to the old look, I had to go from this:
<form> <div class="clearfix"> <label>This:</label> <div class="input"> <input readonly="readonly" value="<%= model.this %>" /> </div> </div> ... <div class="clearfix"> <label>That:</label> <div class="input"> <input readonly="readonly" value="<%= model.that %>" /> </div> </div> </form>
to:
<form class="form-horizontal"> <fieldset class="control-group"> <label class="control-label" for="this">This:</label> <div class="controls"> <input readonly="readonly" value="<%= model.this %>" name="this" /> </div> </fieldset> ... <fieldset class="control-group"> <label class="control-label" for="that">That:</label> <div class="controls"> <input readonly="readonly" value="<%= model.that %>" name="that" /> </div> </fieldset> </form>
I’m sure there are other changes, but that was enough for the subset I’m using.
Thanks for the guide this saved me some serious headaches today.