Notice: Undefined index: a777d in C:\Websites\Dduckster\index.php on line 3
Upgrading Bootstrap 2.3.2 to Bootstrap 3 – Dduckster

Upgrading Bootstrap 2.3.2 to Bootstrap 3

Today I upgraded my site http://cloudshap.es from Bootstrap 2.3.2 to the v3 RC2.

When the Bootstrap folk said that “everything has changed” they sure weren’t kidding. I wanted to document every gotchya I encountered (and there were a fair few!) . I doubt you would bump into all of these as Cloud Shapes is heavily customised over the default Bootstrap look but you might find some of it useful 🙂

First up switching to the new Column sizing:

I wasn’t sure which grid size to use as default so I’ve gone for “md”

  • Replace all “spanx” with “col-md-x
  • Replace all “offsetx” with “col-md-offset-x
  • The new columns use 15px padding on each side instead of 30px left margin which threw me for a while.
  • box-sizing on by default. This one drove me mad after years of following the CSS box model…

Navbar  changes

  • brand and toggle button now need to enclosed in navbar-header
  • navbar min-height is now 50px by default
  • background-color is applied to .navbar
  • navbar has 15px padding on the sides

Buttons

  • btn-group buttons float left
  • padding top and bottom increased to 6px

Forms

  • control-group changed to form-group
  • individual inputs need class form-control
  • inputs need sizing or else they’re 100% width!
  • labels are now bold
  • no longer use a div with class controls to contain inputs
  • input-prepend has changed to input-group
  • add-on has changed to input-prepend-addon

Lists

  • No longer have padding:0 so you have to strip the padding yourself

Breadcrumbs

  • Had to strip out all my dividers as they’re put in automatically now

Modals

  • No longer use the class “hide” to hide modal popups on the page
  • Have to use modal-dialog and modal-content instead of modal-container

Glyphicons

this one was a bit confusing and annoying. Glyphicons are no longer included in the main package meaning you have to download them separately and include the new fonts and css yourself. Then you have to change all the old …

So yeah quite a lot of manually fiddling involved for relatively little gain but at least the Bootstrap files I’m serving up are smaller. I hope someone finds some of this useful 🙂

-Dd

Categories: Dd, Web Development

1 Comment

  • Ashley says:

    I see a lot of interesting posts on your website.
    You have to spend a lot of time writing, i know
    how to save you a lot of work, there is a tool that creates unique, SEO friendly posts in couple
    of minutes, just type in google – k2 unlimited content

Leave a Reply