Twitter Bootstrap Tips and Tricks - Part 1

Posted by admin on Jun 05, 2014, in Frameworks

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

We created this guide with great tips & tricks for the Twitter bootstrap for you. In the first part we will discuss the basics and tips for grid layouts, buttons and tabs. In the second part we will cover the actions area and how you can implement your code with bootstrap and how to switch to responsive layouts, use LESS preprocessor and customization options.


What is Bootstrap?

The Bootstrap framework actually comes from one of the Twitter teams, that wanted to put together a toolbox for coworkers, as a base framework for new web projects. It currently has almost 25.000 forks and 68.000 followers, at the version 3.1.1, being one of the most popular projects from Github. Besides HTML and CSS components it also includes a range of practical jQuery plugins for common user interface and since version 2 it supports and is heavily used for responsive layouts development. In the below examples we will use the 2nd version as a reference.

Although created by nerds, it is suitable for developers of all levels. It is intended to be a style guide, but well documented and with practical code examples that are ready to be used. Bootstraps down limit is Internet Explorer 7. Users who still develop and support IE7 unfortunately will not enjoy the benefits of gradients, rounded corners and shadows. Bootstrap follows the principle of progressive enhancement. The CSS code can be further developed and managed by using the CSS preprocessor LESS. Particularly attractive is the download section. You indicate which components you want in your download package and receive your personal variant, with colors, fonts, the degree of rounding of input fields and more. You are basically able to adapt it to your or to your client needs.

Bootstrap Guide - How should I start?

To start using Twitter Bootstrap, you should download the complete code including documentation from Github. There you will find in the docs/examples folder the document starter-template/index.html which provides a good basis for the first steps with Twitter Bootstrap. It starts - as expected - with the HTML5 doctype:

Then the base stylesheet is included:

This ensures that all HTML elements are cross-browser and displayed the same. Normalize.css is used. Unlike, for instance to a classic reset, the paddings and margins will be set to a reasonable default value in the normalization process. This is an excellent base on which to build with additional formatting. The stylesheet for the responsive layout is also involved. You should only use it when you really want to create a responsive layout:

The javascript file HTML5 Shim ensures that the newly introduced HTML5 elements are also styled in Internet Explorer:

< - [if lt IE 9 ]>