Top 5 twitter bootstrap hacks

Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0

Today we will be digging out top 5 bootstrap hacks, by hack we mean clever solutions to tricky problems.

We are not saying that the developers of bootstrap are sloppy coders but there is always few things which can be done in tricky way and thats what we are calling as bootstrap hacks.

Bootstrap Hack No.1 Box Sizing

Bootstrap Hack : box-sizing

In bootstrap every single element is defaulted to box sizing as border box.


This means that the way the box model is measured to recalculated the borders of every element and not just the default browser method of only the content.

Bootstrap Hack No.2 Hiding text with class “text-hide”

Remember when you were a small kid and you used to hide your bad report cards under your pillow, in similar fashion bootstrap lets you hide your text using a class called text-hide. But you will ask why do you wanna hide text.


A classic example would be, suppose you want to write your website logo in an h1 tag and also want to add a background image so that crawlers or feeders can read your logo, in that case you can apply a class hide-text to make it invisible to users.


Bootstrap Hack No.3 Clearfix

Problem is, in html when you add a property float to a child element it parent or enclosing element collapses its height, shown in the figure below.

Bootstrap Hack : clearfix-unfixed


But in bootstrap to fix this thing all you need to do is add a class clearfix to the parent element to make it attain a minimum height of its child element

Bootstrap Hack : clearfix-fixed



Bootstrap Hack No.4 Truncated text


Bootstrap makes it very easy to truncate text, suppose you have a table of songs and the name of the song is too big to fit in the space allotted, you can use text-overflow mixin to trucate any line of text as show above.

Note : You need to keep in mind it doesn’t work with multiple lines of text.


Last Bootstrap Hack No.5 Hiding / Displaying elements

When developing responsive websites you have hide certain element or show certain element depending on which screen your site in currently viewed on, Bootstrap provides two different classes to make your element appear or disappear based on the current screen width.
a. hidden-*
b. visible-*
You have to replace * with any of the xs, sm, ms, lg screen size.

Below is switch from one width to another, you can see how we showed one element in one width and another in another width.

Bootstrap Hack : hidden-sm-1

Bootstrap Hack : visible-sm-1



Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0