Look on my works, ye Mighty, and despair!

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.