4 minutes

Twitter Bootstrap 3: New Release Preview – Mobile First


The popular framework created by two Twitter employees some years ago, Twitter Bootstrap, reached huge success on the internet because it helps designers build websites faster and helps them a lot on their way to become better at what they do.

Twitter Bootstrap is a free collection of tools containing HTML and CSS-based templates for forms, charts, buttons, typography, navigation and other user interface components. They also have some optional JavaScript extensions, but these are not the main features. If you want to know how popular it actually is, ask NASA or MSNBC; both of them have side websites built on Bootstrap.

Unfortunately Bootstrap has relatively incomplete support for the latest technologies, HTML5 and CSS3, but the good part is that it is compatible with all major browsers. The second Bootstrap version supports responsive design as well, meaning that all their frameworks can automatically adjust to different screens on different operating systems.

Twitter Bootstrap is the most popular project on GitHub and it is open-source, which means that everybody is encouraged to contribute and help improve the framework. So just as a side note, if you have the required knowledge, the guys from Bootstrap are always in need of some help.

Some time ago we actually showed you a collection of elegant websites built on the Bootstrap framework, and you can go back and read the article here. Sure, there are many more right now, including Designmodo’s free Flat UI pack which you can find here.

The framework is modular and it is based on LESS stylesheets that implement various components of the toolkit. Developers can select the components they want to use and are not forced to use all of them, which means they can reduce the size of their files considerably – this leads to fast-loading websites and happier visitors.

Bootstrap 3.0

Bootstrap 3.0

Few days ago Twitter announced Bootstrap would release their newest version very soon, labeled 3.0, as it is their third major release. In order to make designers stay tuned, they released an early look at what to expect from the new framework.

Online HTML Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try now for free!

Learn MoreOther Products

An article published back in December made clear what the Bootstrap team works on for the new major update and the announced improvements were these:

  • Change the Bootstrap URL
  • Compile all LESS code, as well as the responsive styles, all in a single CSS file
  • Drop support for IE7
  • Switch to the MIT license instead of the Apache
  • Drop the *-wip branch style of development
  • Accelerate versioning
  • Improve responsive CSS
  • Centralize community efforts

However, many more features have been announced for the actual 3.0 release which is yet to come. The framework is now labeled as “mobile first”. The release has been totally rewritten to be mobile friendly from the beginning and instead of adding optional mobile styles as before, in the new Bootstrap they will be available into the core code. These mobile styles will not be in separate files anymore, but in the library, which makes using Bootstrap even easier than before.

Some other actual changes include converting docs to Jekyll instead of Mustache, redoing illustrations, updating example screenshots to be retina-ready, redesigning icons preview, updating all examples to reflect changes in the markup, but also improvements for the JavaScript area: overhauling CSS transitions and reinforcing with JavaScript modules as necessary, improving noConflict throughout plugins and name-spacing events to reduce conflict issues.

Let’s now look at some of the most important improvements that were actually introduced in Bootstrap 3.0:

  • Colors such as @blue or @orange were removed, but they were not used that much anyway.
  • In order to match CSS patterns, the .opacity () mixin uses now decimal values instead of whole numbers.
  • The grid systems are fluid by default.
  • The @altFontFamily variable is removed.
  • Regarding forms, .form-search and .controls-row are removed.
  • Dropdowns are now allowed within button groups.
  • The .nav-list option is now modified to make it look like the BS2 sidenav.
  • Support for .navbar-search has been dropped.
  • The .btn-navbar variable is now called .navbar-toggle
  • The framework is tested on iOS5 and on Android devices, including on native Chrome browsers.

Bootstrap 3.0 comes with lots and lots of new features and it would take a very long time for me to talk about all of them, but the I have mentioned the most important above, so at least you have a place where to start from.

There are some solid overhauls in the layout and grid system, typefaces, tables, images, buttons, forms, icons, navigation and in the customizer. You can see every and each one of the new features here.

We do not know yet when Bootstrap 3.0 will be fully released, but its current Release Candidate version has been out for some days and you can jump straight into it. The fact that the RC has already been release tells us that it will not be a lot of time until the final release will be out there.

Bootstrap 3.0 comes with huge improvements that will not only ease our web design work, but also the mobile platform design part of it. Such frameworks can’t be easily found on the internet and I believe that there are not many better out there, so go and make use of Bootstrap as much as you can.

Christian Vasile

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Posts by Christian Vasile
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree