Introducing Twitter Bootstrap 3 with it’s new advanced features
The Twitter Bootstrap 3 framework is an awesome and powerful tool to develop frontend user interfaces for web applications. Twitter Bootstrap 3 is a simple and flexible HTML, CSS, JavaScript and jQuery plugins framework for popular user interface components. Bootstrap makes it easy to create good-looking web pages and web-apps, plus it has a ‘responsive grid’ built-in automatically to make designs compatible with mobile browsers (both tablets and smartphones).
A couple weeks ago the developers of Bootstrap made a major update moving from 2.3.2 to version 3.32
Twitter Bootstrap 3 has major changes from all it’s past versions. It is a mobile-first framework and makes your site “always responsive” by default, whatever you design or create will be mobile compatible or responsive.
Twitter Bootstrap 3 is one of the best CSS frameworks for building responsive website designs..
So now, take a look at the major difference between Bootstrap 2 vs Twitter Bootstrap 3.
Bootstrap 2
Span method is used to create columns.
It does not support mobile-first.
Container and Container-fluid class are used.
Bootstrap 2 meta tag:<meta name=”viewport” content =”width =device-width,initial-scale=1.0″>
Twitter Bootstrap 3
Col method is used to create columns.
It support mobile first framework.
They used container class.
Bootstrap 3 meta tag :<meta name =”viewport” content=width=device-width, initial- scale= “1.0”>
Note
If we want to update the legacy bootstrap build to Twitter Bootstrap 3, we need to change the HTML code from span to col (columns) methodology. And for updating the legacy bootstrap build, we are going to update it as per “mobile first framework” by using bootstrap 3 mobile class (xs and sm).
Different versions of Ajax Library are used to enable the jQuery functionality in Bootstrap
***Ajax library update for bootstrap 2:
JQuery v1.7.1 jquery.co
Ajax library update for bootstrap 3:
JQuery v1.9.0+ jquery.com (see: #2245299: minimum jQuery version is 1.9.0 for Bootstrap 3.1.1)
Note
The project page should be updated to point users to find the current minimum version of jQuery needed for the latest Bootstrap.
In legacy bootstrap 2, we use live or delegate method, and then we change the method to “ON” because after jQuery 1.9.1 the ‘live’ or” delegate” method is deprecated by “ON’ method.
GLYPHICONS
“Glyphicons ” is a library of properly prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.
So, now these are the certain changes that have been made in the Glyphicons
In bootstrap 2, you have 140 icon glyphs in spirit form, available in dark gray (default) and white provided by Glyphicons.
In order to upgrade Bootstrap build you have to change the “glyphicon”. While the Twitter Bootstrap 3 has included 260 glyphs in font format from the Glyphicon Halfing Set.
For running Bootstrap website in IE
<!–[if lt IE 8]>
<link href=”css/bootstrap-ie7fix.min.css” rel=”stylesheet”>
<![endif]–>
Updating process:
- Adding bootstrap-responsive.css in your application.
- Twitter Bootstrap 3: The .container & .row classes are now fluid by default, so it does not use -row fluid or container fluid anymore in your 3x. markup.
Grid Migration
How to convert from a 2.x to 3.0 grid without any responsive changes.
- replace .container-fluidwith .container.
- replace .row-fluidwith .row.
- replace .span*with .col-md-*
While the Twitter Bootstrap 3 large grid (.col-md) are similar to the 2.x (span) grid, non form containers do not utilise the new responsive improvements in Bootstrap 3. If you want to “get more responsive” use the col-xs (tiny),col sm-(small) and col-lg(large) classes for better scaling on smartphones and tablets. Now you can use 3 different grid sizes, to exclude the vertical stack on smaller sizes.
Navbar Migration
How to convert from a 2.x to 3.0 navbar
- remove .navbar-inner
- replace .brandwith .navbar-brand
- wrap .navbar-brandand .navbar-toggle inside .navbar-header
- add .navbar-navto .nav
So there are also some changes in Navbar migration. The “.brand” is replacing with the “navbar-brand”. It is used to define the links.
Modal Migration
How to convert from a 2.x to 3.0 modal
- remove.hide from the .modal (it’s now hidden by default)
- wrap.modal-header .modal-body .modal-footer inside .modal-content
- wrap.modal-content inside .modal-dialog
Twitter Bootstrap 3 Migration Guide
You can use this block as a general migration guide to upgrading from v2.x to v3.0.
Major CSS Class Changes
A consistent design in Twitter Bootstrap 3 is the use of “base” CSS class names that provide a default for elements. The following table shows the CSS style changes between v2.x and v3.0.
Bootstrap 2.x | Bootstrap 3.0 |
.container-fluid | .container |
.row-fluid | .row |
.span* | .col-md-* |
.offset* | .col-md-offset-* |
.brand | .navbar-brand |
.hero-unit | .jumbotron |
.icon-* | .glyphicon .glyphicon-* |
.btn | .btn .btn-default |
.btn-mini | .btn-xs |
.btn-small | .btn-sm |
.btn-large | .btn-lg |
.visible-phone | .visible-sm |
.visible-tablet | .visible-md |
.visible-desktop | .visible-lg |
.hidden-phone | .hidden-sm |
.hidden-tablet | .hidden-md |
.hidden-desktop | .hidden-lg |
.input-small | .input-sm |
.input-large | .input-lg |
.input-prepend | .input-group |
.input-append | .input-group |
.add-on | .input-group-addon |
.btn-navbar | .navbar-btn |
.thumbnail | .img-thumbnail |
ul.inline | .list-inline |
You can see the above table, “container-fluid ” and “row-fluid” classes are now container and row. There is no more “span”. There is now base column unit named “col-md” that is sized using “col-lg-“. So instead of span2, you’d now use col-lg-2. This also works for offsets, so offset is now col- md-offset and so on.
The elements in Twitter bootstrap 3 which are removed by bootstrap 2
Below are those elements which have been released or changed in v3. For example, hero unit is removed from 2.x and added in 3.0 with its new name called jumbotron.
Element | Removed from 2.x | 3.0 Equivalent |
Hero Unit | .hero-unit | .jumbotron |
Form actions | .form-actions | – |
Grid | .span* | .col-md-* |
Fluid container | .container-fluid | .container (no more fixed grid) |
Fluid row | .row-fluid | .row (no more fixed grid) |
Icons | .icon-* | .glyphicon-* |
Navbar button | .btn-navbar | .navbar-btn |
Navbar inner | .navbar-inner | – |
Nav list | .nav-list | .list-group |
Thumbnails | .thumbnails | .col-* and .thumbnail |
Input append / prepend | .input-append .input-prepend .add-on | .input-group |
Dropdown submenu | .dropdown-submenu | – |
Tab alignments | .tabs-left .tabs-right .tabs-below | – |
Form actions | .form-actions | N/A |
Search form | .form-search | N/A |
Form group with info | .control-group.info | N/A |
Fluid container | .container-fluid | .container (no more fixed grid) |
Fluid row | .row-fluid | .row (no more fixed grid) |
Controls wrapper | .controls | N/A |
Controls row | .controls-row | .row or .form-group |
Navbar inner | .navbar-inner | N/A |
Navbar vertical dividers | .navbar .divider-vertical | N/A |
Dropdown submenu | .dropdown-submenu | N/A |
Tab alignments | .tabs-left .tabs-right.tabs-below | N/A |
Nav lists | .nav-list .nav-header | No direct equivalent, but list groups and .panel-groups are similar. |
Twitter bootstrap 3 Additional Information
- Notes & Caveats
- .input-*are 100% width. Wrap inputs inside <div class=’col-md-*’></div> to control input widths.
- .badgeno longer has contextual (-success,-primary,etc..) classes
- .btnmust also use .btn-default to get the ‘default’ button
- .containerand .row are now fluid (percentage-based)
- Images are not responsive by default. Use.img-responsive for fluid IMG size
- Include.glyphicon base class in all icons (ie: .glyphicon .glyphicon-asterisk).
For updating to Twitter Bootstrap 3 and running a responsive website successfully in IE, we need to add the “Respond.js” to enable media query.
Feature | Internet Explorer 8 | Internet Explorer 9 | |
border-radius | Not supported | Supported | |
box-shadow | Not supported | Supported | |
transform | Not supported | Supported, with -ms prefix | |
transition | Not supported | ||
placeholder | Not supported |
Major CSS Changes
Bootstrap 2.x | Bootstrap 3.0 |
.container-fluid | .container |
.row-fluid | .row |
.span* | .col-md-* |
.offset* | .col-md-offset-* |
.brand | .navbar-brand |
.navbar .nav | .nav .navbar-nav |
.hero-unit | .jumbotron |
.icon-* | .glyphicon .glyphicon-* |
.btn | .btn .btn-default |
.btn-mini | .btn-xs |
.btn-small | .btn-sm |
.btn-large | .btn-lg |
.visible-phone | .visible-sm |
.visible-tablet | .visible-md |
.visible-desktop | .visible-lg |
.hidden-phone | .hidden-sm |
.hidden-tablet | .hidden-md |
.hidden-desktop | .hidden-lg |
.input-prepend | .input-group |
.input-append | .input-group |
.add-on | .input-group-addon |
.btn-navbar | .navbar-btn |
.thumbnail | .img-thumbnail |
Lightweight
Unlike version 2, all the icons are now contained in a separate CSS file. The CSS has been increased for performance as its size is approx 79kb. In CSS terms, the new Twitter Bootstrap 3 allows for easier customization by improving on inheritance and specificity. We don’t need to understand the fore mentioned, but realise that Twitter Bootstrap 3 does require more mark up in our HTML. In the end, it will means less customisation and CSS overrides to achieve what we want. Also, all the CSS classes for Twitter Bootstrap 3 are included in a single file.
For any doubts and queries, feel free to leave comments below. Remember to subscribe to our newsletter. Do share the tutorial if you think it’s worth it.
Cheers!