Bootstrap – unlimited responsive template?

Table of Contents

Show me your cards (not, not Bootstrap themes yet)… As we’re all waiting for top mobile devices premieres, I bet we’re all satisfied right now. Apple showed its iPhone 5c and iPhone 5s – for the first time in history mobile device has been equipped with 64 bit CPU – future yet to come? On the other side, Samsung launched its Gear and Note III during IFA fair trade in Berlin

The first one should (shouldn’t) revolutionize mobile market and the second seems to be world’s most powerful phablet ever. So as we can see, last month brought some interesting break-ups, which should be responsible for mobile market evolution in the following months or years.

So now it shouldn’t be a secret, why Bootstrap 3.0 (or should we say Bootstrap themes v3.0) knocks on mobile world’s door… Some say, that v3.0 has been created in accordance to “mobile first” idea - the 2.x grid has been completely rethought in an effort to achieve it. In numbers, we can just say that from Bootstrap 2.3.2 to 3.0 there were over 1,700 commits, 77,000 additions/deletions and 370 changed files. But finally, we’re ready to go with more responsive Bootstrap themes!

Bootstrapmaster have offered fully responsive templates even in the older templates, cause we knew that you gonna use our tools in a great variety of devices, starting from smartphones, through tablets, notebooks, desktops and even smart TVs. But Bootstrap 3.0 will give developers brand new user experience thanks to it “mobile first” orientation. There is no longer a separate bootstrap-responsive.css file. All responsive features are now compiled into a single core bootstrap.css file. And if it’s still not enough, let’s just say that Bootstrap 3.0 allows also Web page elements (text, images, buttons, paragraphs, etc..) to scale accordingly as the viewing area, size and resolution changes from wide-screen desktop to tablet to small screen smartphone. So just to mention, Bootstrap 3.0 grid comes in 4 major sizes:

  1. Tiny (for smartphones .col-xs-*),
  2. Small (for tablets .col-sm-*),
  3. Medium (for laptops .col-md-*)
  4. Large (for laptops/desktops .col-lg-*).

Before we’ll focus on all major changes, please take a look at this brief summary of changes from Bootstrap 2.x to 3.0

{:.table.table-striped}

Bootstap 2.x Bootstrap 3.x
.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

What do you think about these changes in Bootstrap themes? We’ll be more than happy to get your remarks, so we could answer them in the next part of our blog.

Keep you updated,

Cheers,

Bootstrapmaster Team

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
Passing props to child components in React function components
Passing props to child components in React function components

How to loop inside React JSX
How to loop inside React JSX

How to validate an email address in JavaScript
How to validate an email address in JavaScript

What is the difference between typeof and instanceof in JavaScript
What is the difference between typeof and instanceof in JavaScript

How to conditionally add attributes to React components
How to conditionally add attributes to React components

How to force a React component to re-render
How to force a React component to re-render