fnfdgw
Last Updated: February 25, 2016
·
1.824K
· michaelperrin
C9b09af5c83e1a9150ad53012f7fe2e1

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-fluidclass="row
  • class="([^"]*)offset(\d+)class="$1col-md-offset-$2
  • class="([^"]*)span(\d+)class="$1col-md-$2
  • class="label"class="label label-default"
  • label-importantlabel-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-labelclass="$1col-sm-4
  • class="([^"]*)add-onclass="$1input-group-addon
  • class="([^"]*)input-appendclass="$1input-group
  • class="([^"]*)input-prependclass="$1input-group
  • class="([^"]*)add-onclass="$1input-group-addon
  • class="([^"]*)modal hideclass="$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.

Say Thanks
Respond

1 Response
Add your response

18238
Ccea3a60906efb3568ea6708289a6058

Thanks very much, I found this post useful.

over 1 year ago ·