LESS css & media queries for a responsive design with Bootstrap

Using media queries in a single file, we can support multiple devices with different screen sizes.

Bootstrap doesn’t automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

1. Use the compiled responsive version, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Set up different styles in groups to show or hide contents by devices

    // Landscape phones and down
    @media (max-width: 480px) { ... }
     
    // Landscape phone to portrait tablet
    @media (max-width: 767px) { ... }
     
    // Portrait tablet to landscape and desktop
    @media (min-width: 768px) and (max-width: 979px) { ... }
     
    // Large desktop
    @media (min-width: 1200px) { ... }