Align Div or List to Horizontal, Vertical Center to Parent

Bootstarp 4 has introduced classes to align div or list to horizontal, vertical center to it’s parent. Do you have a list inside a div and you wish to vertically align center to list items inside the parent div? And want to maintain vertical centered position as well as horizontal centering in Bootstrap when viewport size changes? I described here how Bootstrap and Non BS users can accomplish this alignment.

Read More

Responsive Modal or Popup – only CSS and Animation

Responsive modal or popup are common features in a web application. They are used to show extra information or a form on the same page as popup above existing content upon clicking to a link or button. This article will help you to create a responsive modal or popup with CSS only.

I have also explained this pure CSS concept along with. So that you can understand how does this thing work. It will help you to change the CSS rule to organize responsive modal in your own way.

Read More

Placing text above foreground image in html

It’s quite common to use background image and place text above it but it’s also possible to use image in foreground and place text above foreground image overlay. You can also horizontal center or vertical center the text as explained in the article.

So our page contains a piece of HTML as follow:

Read More

Getting Class or Id of element that fired an event

In jQuery we sometimes need to find class or Id of element that fires an event in a web page. This simple code below will do the job for getting Class or Id of element that fired an event in jQuery.

First of all we need jQuery so you need to add self hosted jQuery or one from available CDNs. I’m getting it from Google here.

Read More

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.

Read More

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.

Read More

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.

Read More

[ Page 1 of 3 ]