Twitter Bootstrap Part 1: What is Bootstrap Anyway?

Here at Untame we love to build websites for incredible clients, moreover we love to build those sites using cutting edge tools that provide functionality that help our clients stand out from the herd. Behind the scenes we have been working with a fantastic front end web framework called Twitter Bootstrap. Like you would think from the title, it was made by an incredible group of developers and designers employed by Twitter (you may have heard of em… little social network sort of site, may catch on one of these days).

Bootstrap was created by Mark Otto (@mdo) and Jacob Thornton (@fat) and handed over to a thankful world in August of 2011. Their goal was simple: to empower front-end developers to kickstart projects more efficiently and effectively.

Consider this the beginning of a larger investigation of the power of Bootstrap and how we use it (you can too) to create awesome web apps.

What is it anyway?

If you are reading this article (thank you by the way) you are likely a very attractive and powerful web designer or developer looking to spruce up your workflow. Well you are in luck. Using Bootstrap, you can create dynamic and fully featured websites quickly. Why? Because Bootstrap is a front-end framework in it’s truest form. Twitter Bootstrap delivers immediately useable simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

Built on HTML5


Ahh the future of the web. While it may be the future, HTML5 is great because it simply allows us to write more semantic, readable code. Bootstrap is packed with HTML5 best practices to help make sure that you are creating future-proof projects for your clients.

 

CSS3 Integrated


If you would like to get started with CSS tricks like box-shadow and gradients Bootstrap is a great place to get started. Better yet, they have taken the time to provide excellent fallback support for older browsers.

 

Bootstrap is Open Source


Would you like to shell out some cash to get your hands on Bootstrap? Too bad! It is completely open source. In fact there are already some great projects built upon forked versions of Bootstrap that integrate even more awesome features.

What Does Bootstrap Do Exactly?

The Grid


If you are familiar with using grids in your design process Bootstrap will be a great place way to improve your workflow substantially. Making use of a twelve column system, layout is as simple as declaring a row of content and them simply adding appropriately sized columns until you reach twelve… rinse and repeat. Best of all, Twitter Bootstrap offers several different kinds of grids that may prove useful with a wide range of projects. Including a fluid twelve column grid as well as a centered “more traditional” grid. Both however have been designed to maintain responsiveness, view-able on a wide range of devices.

Helpful CSS


“On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.”

Bootstrap bundles in a host of pre-styled elements perfect for immediate integration in a project. Best of all, the creators chose to build Bootstrap upon the lesscss.org preprocessing engine (a personal favorite of mine) making global changes to base styles as easy as editing a single line of code at a time! Ranging from immaculately styled Typography, tables, forms, buttons and built in icons, Bootstrap integrates enough style to fit just about any project. Not finding the right fit? That’s alright, Bootstrap is wildly extensible and scale-able to keep up with your needs.

Built in jQuery Plugins


Javascript is what makes much of Bootstrap so unique and useable. Many plugins that I use in my projects every single day are baked right into the framework from the beginning.

Each plugin combines to provide a consistant user experience throughout any project. However, it is understandable if you find yourself looking through this list of plugins and saying “Hey, my project will never use that plugin”. That’s okay, you may download your own customized copy of Bootstrap including only the files that you require for your next project using their Bootstrap Builder.

What’s Next?


Now that we have an understanding for what Twitter Bootstrap is, we can begin to take it to the next level and use it in a practical application. In upcoming posts we will review how to create a beautiful website using the power that Bootstrap offers. I hope you have enjoyed this first post in our series on Bootstrap. Is there something specific that you would like to learn about? There is still time to let us know and we might just cover it specifically in a later post.

About Brock Nunn

Brock Nunn is a web designer and developer specializing in building custom WordPress for over three years. Brock operates through his company Brock Nunn Web Design offering clients personal service with outstanding results. You can follow Brock on twitter @banunn.

Leave a Reply

What is 12 + 8 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Start planning your project today. Get Started