Bootstrap – Removing padding or margin when screen size is smaller

by

The @media query specifically for ‘phones’ is..

@media (max-width: 480px) { ... }

But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.

Here are some queries that have worked (in most cases) for me:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

Update for Bootstrap 4

Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints):
https://stackoverflow.com/a/43208888/171456

More Related Contents:

  1. Change bootstrap navbar collapse breakpoint without using LESS
  2. Why does the order of media queries matter in CSS?
  3. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  4. Twitter Bootstrap 3: how to use media queries?
  5. Common breakpoints for media queries on a responsive site
  6. Should I use max-device-width or max-width?
  7. Common CSS Media Queries Break Points [duplicate]
  8. What are the rules for CSS media query overlap?
  9. CSS media queries – Order matters?
  10. Change the order of col-*-12 columns in Bootstrap using push/pull
  11. Customize Bootstrap 4’s grid-system Breakpoints
  12. Responsive css styles on mobile devices ONLY
  13. bootstrap 3 responsive table with fixed first column
  14. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  15. Which are the most important media queries to use in creating mobile responsive design?
  16. Set div height equal to screen size
  17. How to make responsive table [closed]
  18. How to code CSS media queries targeting ALL mobile devices and tablets?
  19. How can I avoid media query overlap?
  20. In a bootstrap responsive page how to center a div
  21. Bootstrap Responsive Text Size [duplicate]
  22. Single vs multiple stylesheets in responsive web design
  23. Media Queries – Mobile vs Desktop Browser
  24. How to change Bootstrap navbar collapse breakpoint
  25. Customizing Bootstrap CSS template
  26. CSS media query to target only iOS devices [duplicate]
  27. How to set up fixed width for ?
  28. Bootstrap 4 – Navbar items outside the collapse
  29. Bootstrap change order of columns
  30. Centering the image in Bootstrap

Leave a Comment