Tag Archives: Class

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 ››

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 ››

jQuery functions with CSS media queries for responsive website

Due to difference between CSS media queries based on max-width and jQuery’s ‘$(window).width()’ measurement (caused by the inconsistent ways in which browser media queries handle scrollbars), there is always a mismatch between ‘jQuery $(window).width()’ and CSS3 Media Queries. Which in turn causes some ugly or unexpected behaviour by your responsive website.

Continue Reading ››

Styling Contact Form 7 validation with CSS and border

Contact Form 7 uses minimum CSS for styling and validation. Hence lacking of better UI designing. We can overcome this issue by styling Contact Form 7 validation with border which I’m describing here in this article.

Here, we will apply some CSS rules for validation customization on Contact Form 7 forms including styling Contact Form 7 validation with border

Styling Contact Form 7 validation with border

Continue Reading ››

Removing whitespace between HTML elements

Sometimes we get undesirable gap between HTML element that create unwanted behaviour of element as a result. Fortunately, removing whitespace between HTML elements is not so hard. In this article we will discuss about some solutions to remove the space.

The top three solutions are dedicated as answer of the particular issue I have specified in this article. Later I have provided some general solutions that fit with other tags and elements like inline-blocked elements.

Continue Reading ››