11 Reasons to Use Twitter Bootstrap

Tweet

The popularity of Twitter has helped it cross over from the realm of user-managed social networking to a place where developers sink their teeth into heavy duty code and make the world spin as a result. The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better in general. If you’re not using Twitter Bootstrap yet, it’s time you took a look. Bootstrap is like a candy store for developers full of a multitude of tools.

So why should you use Bootstrap?

1. Save Time

With Bootstrap, the first thing you do is cash in on a lot of time. The Bootstrap libraries offer readymade pieces of code that can pump life into a website. A web developer doesn’t have to spend time laboriously working out and writing code, but simply find the right piece and fit it into the structure they’re working on. In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS.

2. Customizable

A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t. The whole point of Bootstrap is that it lets you factor in your own needs and tailor your development project accordingly. This is the main reason many developers feel some tools are completely useless on the Bootstrap while others revere the same.

3. Factor in the Design

The Grid Speaks

Creating page layouts requires a decent grid. Using the platform’s grid isn’t mandatory, but it does make your job a whole lot easier. On default mode the platform provides a 16 column grid which is 940px wide. A single column holds 40px with an additional 20px acting as the gutter. Rows and spans can be manipulated as needed. Styling is completed in auto mode and a developer can get the job done just by dropping content into the HTML they’re working with. Additionally, if you need to work through columns and nesting, then you’ve got the right grid to get the job done.

LESS is more

LESS has in reality gone ballistic within development circles. With its additions to the Bootstrap platform, you can use LESS mixins and CSS manipulations to customize the built-in grid. The fact that changes are automatically updated after each variable shift doesn’t hurt either. Bootstrap takes some of the most popular CSS3 utilities and brings them to life as a homogenous reaction on all browsers.

JavaScript

Bootstrap comes equipped with JavaScript libraries that go above and beyond basic structural and styling. JavaScript often becomes an integral part of a web design and developers have to pull in all elements together to see the final form flourish. With Bootstrap, a developer can easily manipulate modal windows alerts, tooltips, Scrollspy, Popover, Button, Typehead, etc. The best part, however, is that Bootstrap enables you to skip writing the script altogether.

4. Consistency

One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on the development front and the end-user front. Since it works with a central set of development code, Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox.

5. Updates

Take JQuery UI as an example here: updates get to users twice a year. Bootstrap, on the other hand, is ever-evolving with updates coming out on a much more regular and constant basis. As soon as web developers find a problem, the Bootstrap team starts looking to fix it.

6. Integration

If you’re working on a site which is already live, but still trying to iron out the creases then Bootstrap can help. For instance, if you use table styling, all you need to do is take the styles you need and copy them to the CSS file you’re working with. Bootstrap will immediately kick in with its own style and all you need to do from there is link up the file you are working with or hotlink to Twitter (more or less). Integration is simple, fast and easy to accomplish and once you’re done you can play with your design to your heart’s content.

7. Responsiveness

Bootstrap is responsive. If you shift from a laptop to an iPad and from an iPad to a Mac you won’t have to fret over your work. Bootstrap adapts to the change in platforms with super speed and efficiency.

8. Future Compatibility

Bootstrap comes equipped with many elements that are being considered the future of design itself. For instance both HTML5 and CSS3 are things that are going to be big in the future. Since the framework takes into account the future of design and development, it has the potential to become a yardstick for web developers in the years to come.

9. Competitiveness

Bootstrap isn’t the only one of its kind. It has been pitted against JQuery UI and the HTML5 Boilerplate, but a more realistic competitor is the Zurb Foundation. Bootstrap 2 has a toolset that the Foundation will have a tough time matching up to.  Third party plugins, themes, a plethora of features, codes, etc. are already up for grabs with Bootstrap – which isn’t true for the Foundation at this point. Some of you might feel that Bootstrap has a bloated feel (which the Foundation doesn’t) but that can be easily done away with through the custom Bootstrap download builder.

10. The Docs Talk!

Bootstrap’s documentation is impressive. The case with most newer platforms is that they don’t have proper documentation, but Bootstrap gives you a head start because you don’t have to play with everything to learn and instead can find information on just about anything through the documentation.

11. For the Bosses

You don’t need to spend a lot of time learning to use Bootstrap as it has taken all modular approaches and good architecture and pulled them together. From the perspective of an employer, if you give a web developer the Bootstrap framework then they won’t need to spend as much time learning, as compared to HTML and CSS. Bootstrap allows for immediate quality work, which makes it great for facilitating efficient, outcome-oriented design communication.

Conclusion

After reading all this, if you think Bootstrap can help you up your game as a web developer then check out the platform here: twitter.github.com/bootstrap/. You can either download a compiled version or get the Bootstrap source which has original CSS and JavaScript docs.

Be aware that you do need a working knowledge of web development concepts like HTML and CSS to get the ball rolling. The documentation that comes with the platform can help walk you through the different tools and components you’ll be working with, for example Base CSS, Scaffolding, JS plugins, etc. If there’s any other information that you’re looking for, head over to Bootstrap docs.

So, will you be taking a ride on the Bootstrap train? If you’ve used the platform, what has been your experience?

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like An Introduction to Bootstrap.

Comments on this article are closed. Have a question about Twitter Bootstrap? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.triadwebservice.com Lynn Wilkinson

    I love Bootstrap! The responsive framework makes it easy to build customized sites without re-inventing the wheel.

  • http://www.bootstraphero.com Michael Buckbee

    I think there is a twelfth reason as well: Community. The Bootstrap community is huge and expanding rapidly, case in point our list of 246 third party Bootstrap resources: http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

  • http://webdesignpop.com Michael

    I really like Bootstrap and think it will grow to be very popular among designers as well as devs. I’m building some sites on it now, and it’s pretty simple. To switch from fixed to fluid couldn’t get any easier.

    Incidentally, in your #3 you state it’s a 16 column layout; it’s actually 12 columns. It used to be 16.

    Great post!

  • HamptonNorth

    It is a 12 column grid – not 16

  • Loganathan Natarajan

    Really, Bootstrap is very useful to make websites easier.

  • Jonathan

    Good Framework to start, if you want to get more serious and using SASS, Foundation from Zurb is the way to go.

  • http://www.eugeniocorrao.it Eugenio

    I love this framework, i’m thinking about restyling my website around that one. Thank you for sharing :)

  • http://theled.co.uk John Polling

    It’s fine for quick prototypes, however for production sites it’s not good enough. It makes you write poor quality markup and the JS libraries are far from unobtrusive.

    Foundation is a much better framework, if you need to use one

    • http://www.erkasoft.com ertan kayalar

      I aggree with you. Foundation is better. Clean & simple code.

  • http://www.siteontwerpers.nl Cor Claessen

    I did find it a bit of a struggle to f.i. change the nav area. After a while I found out the best way to make changes is to add an additional css file to your html files.
    Also a good framework and very easy to add your own styling is Skeleton. Check it out.

  • http://mklmultimedia.co.uk Mik Fielding

    I have mucked about with Bootstrap along with a few other frameworks out there, I found some good ideas but, like all of the others I find in messy and it takes a lot of time to strip out all of the stuff you don’t need. I agree with John Polling, most other frameworks it leads to poor quality markup.
    I eventually gave up on other frameworks and designed my own, nicking some of the best bits I have found, of course, but getting things arranged in a logical and easy to edit manner. I have stripped it down to the basic essentials and have a catalogue of elements that can be added as and when required.
    I still check out others to see if anyone has come up with anything useful, but on the whole I have found that, generally speaking, the frameworks out there, Bootstrap included, are built by techies who are very good at making these all singing, all dancing frameworks, but in everyday use by a designer they become very cumbersome in use.
    The same goes for WordPress themes and frameworks also …

  • Patrick

    “In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS.”

    I don’t understand this sentence at all. What difference does it make if it was built with LESS?

  • Alastair Moore

    I’ve been very interested in Twitter Bootstrap but it uses LESS and I’m more of a SASS guy. Thanks to the above who mentioned Foundation – I think I might be swayed towards that.

  • http://yon.ir yon

    and there’s an important reason to don’t use it, your code get messy and more time consuming to be processed …

  • http://aronmarriottsmith.co.uk Aron

    The best way to use frameworks such as Bootstrap and Foundation is to Fork them on GitHub, then use the parts you want to build and fine tune your own set of tools.
    Reusing code as a starting point and customising for each project is much faster than reinventing the wheel every time.

  • http://www.lucyannendungu.com Lucyanne Ndungu

    This information is really helpful…definitely am going to use bootstrap in my next project…..

  • http://f1beta.com Anirudha Gupta

    I am using bootstrap from a little time. I like it because it’s save a lot of time do same thing on every project. I happy to read about framework here on sitepoint.