Skip to main content

Bootstrap Responsive Media Queries CSS Tips

By
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

Labels:

Comments

Post a Comment

Popular Posts

How to use terminal within the Sublime Text editor?

By
Sublime Text is primarily a text editor and does not have a built-in terminal like some other integrated development environments (IDEs) do. However, you can use the terminal from within Sublime Text by installing a package called Terminal and Terminus . To use the terminal in Sublime Text using Terminal package, follow these steps: Install Package Control (if you haven't already): Open Sublime Text. Press Ctrl + (backtick) to open the Sublime Text console. Copy and paste the installation code for Package Control from the official website: https://packagecontrol.io/installation Press Enter to execute the code. Wait for Package Control to install. Install the "Terminal" package: Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac) to open the command palette. Type "Package Control: Install Package" and select it from the command palette. In the package list, type "Terminal" and select the "Terminal" package to install it. Open t...
Post a Comment
Read more

How to take user input from terminal(stdin) in Rust?

By
In Rust, you can use the std::io module from the standard library to read input from the user. Here's an example that demonstrates how to get input from the user: use std::io; fn main() { // Create a new instance of `std::io::stdin` for reading user input let mut input = String::new(); // Prompt the user for input println!("Enter your name:"); // Read input from the user io::stdin() .read_line(&mut input) .expect("Failed to read line"); // Trim any trailing whitespace or newlines from the input let name = input.trim(); // Display the user's input println!("Hello, {}!", name); } In this example, we create a mutable String variable named input to store the user's input. We then use the std::io::stdin() function to obtain a handle to the standard input stream. Next, we call the read_line() method on the input stream, passing a mutable reference to the input variable. The r...
Post a Comment
Read more

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

By
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...
Post a Comment
Read more