Like many of you, I don’t like the abrupt opening/closing effect of the Dropdown items in Bootstrap 3 Navbar. Today, we’ll add a slide effect in those to make them behave in a pleasing manner.Read More »
Terminal or console commands are always important if you want to take your web designing or developing skills to advanced level. Whether you are using a SASS for designing, Git for version control, or Composer for a PHP project in Laravel, you just cannot bypass these console commands if you want to work efficiently. If you are using Windows and are new to terminal commands, this post is for you. The basic console that comes with Windows is the good old Command Prompt (cmd.exe) and in this post, we’ll go through the basic commands for Command Prompt.Read More »
I have been working with responsive frameworks for quite a while and without any doubt, Bootstrap is my favorite responsive framework so far. But there are always a few occasions when you need to extend the capability of Bootstrap yourself to meet your special requirements. For example, creating an extra grid for 480-767px. But why would I need this extra grid? As of Bootstrap 3, the smallest grid, Extra Small (class prefix
.col-xs- ) extends from 1 to 767 px in width. That is a very large range compared to other grids: Small (class prefix
.col-sm- ) extending from 768-991px, Medium (class prefix
.col-md- ) extending from 992-1199px and Large (class prefix
.col-lg- ) extending beyond 1200px. Now, consider two scenarios:
1. If you want to create more than one columns for Extra Small, they may look great in screen width close to 767px, but when you go below 480px, they look really clumsy.
2. If you use small (e.g. 500px wide) preview images with 100% width that look good in smaller resolution, then they start looking too big and not to mention, pixelated. Again, if you use max-width and center align to adjust for them, the space on both sides ruins the aesthetic value of the design.
Those being said, I once got into a situation where I needed to define an extra grid for 480-767px to avoid adjusting the widths of elements with unnecessary media queries at every step. So, if any of you want this extra Bootstarp grid as well, here is how to achieve this. Read More »
Read More »