Skip to main content

Bootstrap Responsive Media Queries CSS Tips

AS a developer I faces lots of problem while making website responsive to make website visible correctly on all devices like mobile, tablet and desktop. So, today I am sharing some Bootstrap responsive CSS styles and Media Queries  tips with you.

But make sure that you are not repeating the same media queries for the same screen size. Otherwise it will override your previous CSS style rules. 

 


The Grid Sizes

.col-xs-$ => Extra Small (Phones Less than 768px)
.col-sm-$ => Small Devices (Tablets 768px and Up)
.col-md-$ => Medium Devices (Desktops 992px and Up)
.col-lg-$  => Large Devices (Large Desktops 1200px and Up)



Here is the Responsive CSS Style for all Screen Sizes



Read more: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Comments

Popular Posts

List of latest and most asked PHP practical interviews questions & answers

Core PHP Practical Interview Questions In this blog post I am sharing a list of some most asked PHP interview questions & answers. These are very useful and helpful for the freshers and experienced developer too. I have taken these questions from different sources and listed here at one place. Ques. How to reverse a string without using any builtin function? Ans: <?php $str = 'My name is Diwakar Kumar'; $len = 0; while(isset($str[$len]) != '') $len++; for($i = $len ; $i >= 0 ; $i--) { echo @$str[$i]; } Ques: Write a function to check if a given string is a palindrome or not. Ans: 1st Method: <?php function isPalindrome($str) { $str = strtolower(preg_replace('/[^a-zA-Z0-9]/', '', $str)); // Convert to lowercase and remove non-alphanumeric characters $reverse = strrev($str); // Reverse the string return $str === $reverse; // Compare original and reversed string } 2nd Method: <?php funct

Document and PDF (.doc, .docx and .pdf) file type validation using jQuery

Document and PDF (.doc, .docx and .pdf) file validation using Bootstrap and jQuery Get here reusable file client side validation using Bootstrap and jQuery.