Tag Archives: Bootstrap

2 ways to center a column in Twitter Bootstrap 3

Here are 2 ways which you can use whenever you need to center a column div within `.container` in Twitter Bootstrap 3 as well as to keep empty space outside the `div` to be evenly distributed. First approach uses offset feature available in Bootstrap while it has a limitation and second approach is using `center-block` class with setting `float: none` in Twitter Bootstrap.

Continue Reading ››

5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five

Twitter Bootstrap has 12 columns grid layout by default which allows you to create responsive layout for your website but you can’t create 5 equal columns without using offset in this setup as sum of those column never meet with 12. But in this tutorial we have created some CSS rules to make five equal columns Bootstrap grid layout. Furthermore you can also have 1/5, 2/5, 3/5 and 4/5 sized columns combined with Bootstrap 12 columns grid layout after reading this post.

5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five

Continue Reading ››

2 Ways for Hover Dropdown in Bootstrap 3 Navbar

The Bootstrap 3 css framework contains a pretty good navigation component called “navbar” which automatically collapse when the viewport is too small. The dropdown menu’s of the navbar open when clicking the main item. For a tablet or phone this behavior is fine, but when using a desktop you might want the menu’s to open when hovering them. So here we are discussing 2 Ways for Hover Dropdown in Bootstrap 3 Navbar.

Hover dropdown in bootstrap 3 navbar

Continue Reading ››

Expand collapse panel with toggle icon in Bootstrap

Twitter Bootstrap is being used popularly due to its powerful responsive front-end capabilities. One among its components ‘Panel’ is used for accordion and we can expand or collapse its body content by clicking on link inside panel heading. But I wanted to expand collapse panel with toggle icon in Bootstrap which are placed on right side inside panel heading as shown in the image below and the icons get changed according to visibility of content in panel.

Expand collapse panel with toggle icon in Bootstrap

Continue Reading ››