Last Updated: February 25, 2016
·
2.709K
· michaelperrin

Useful regular expressions to update to Bootstrap 3

I recently upgraded a project from Twitter Bootstrap 2 to Bootstrap 3.

Here is the list of regular expression replacements I applied in all my templates :

  • class="span(\d+) → class="col-md-$1
  • class="row-fluid → class="row
  • class="([^"]*)offset(\d+) → class="$1col-md-offset-$2
  • class="([^"]*)span(\d+) → class="$1col-md-$2
  • class="label" → class="label label-default"
  • label-important → label-danger
  • class="brand" → class="navbar-brand"
  • class="controls" → class="col-sm-8"
  • class="btn" → class="btn btn-default"
  • class="btn ([^b])" → class="btn btn-default $1
  • class="([^"]*)control-label → class="$1col-sm-4
  • class="([^"]*)add-on → class="$1input-group-addon
  • class="([^"]*)input-append → class="$1input-group
  • class="([^"]*)input-prepend → class="$1input-group
  • class="([^"]*)add-on → class="$1input-group-addon
  • class="([^"]*)modal hide → class="$1modal
  • "<i class="icon icon-([^"]+)"></i>" → <span class="glyphicon glyphicon-$1"></span>

Then I did the following :

  • Manually rework the navbar classes and its subclasses.
  • Update my fields.html.twig file in the Symfony application in order to render fields with default classes for Bootstrap. See http://symfony.com/doc/current/cookbook/form/form_customization.html .
  • Encapsulate modal contents in <div class="modal-dialog"> and <div class="modal-content"> tags. If you are using Twig, the creation of a macro in order to create modals in a generic way is a nice way to go.

Beware that my regular expressions may modify non-bootstrap classes. Review each change before committing the changes.

1 Response
Add your response

Thanks very much, I found this post useful.

over 1 year ago ·