How to remove responsive features in Twitter Bootstrap 3?

by

To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this:

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  1px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  2px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  3px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  9999px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

This sets the min-width on the desktop style media query lower so that it applies to all screen widths. Thanks to 2calledchaos for the improvement! Some base styles are defined in the mobile styles, so we need to be sure to include them.

Edit: chris notes that you can set these variables in the online less compiler on the bootstrap site

More Related Contents:

  1. Responsive website zoomed out to full width on mobile
  2. Bootstrap 3 breakpoints and media queries
  3. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  4. Bootstrap 3 Navbar Collapse
  5. Five equal columns in twitter bootstrap
  6. Bootstrap Rows and Columns – Do I need to use row?
  7. What is the difference between Bootstrap .container and .container-fluid classes?
  8. Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
  9. Updating Bootstrap to version 3 – what do I have to do?
  10. Change the order of col-*-12 columns in Bootstrap using push/pull
  11. Bootstrap – row can I have columns add up to more then 12?
  12. Stacked Tabs in Bootstrap 3
  13. Bootstrap 3 – Why is row class is wider than its container?
  14. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  15. Images not responsive by default in Twitter Bootstrap 3?
  16. How to create a sticky left sidebar menu using bootstrap 3?
  17. How to create new breakpoints in bootstrap 4 using CDN?
  18. BootStrap3 keep the dropdown menu open after click on the item
  19. Should I use Bootstrap from CDN or make a copy on my server?
  20. Bootstrap 3.0 – Fluid Grid that includes Fixed Column Sizes
  21. Bootstrap 3 Gutter Size
  22. What’s the tabindex=”-1″ in bootstrap for
  23. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  24. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  25. Different slide duration for each item on bootstrap 3.1 carousel
  26. How can I get my Twitter Bootstrap buttons to right align?
  27. Bootstrap – Removing padding or margin when screen size is smaller
  28. Simple Bootstrap page is not responsive on the iPhone
  29. Binding to Collapse event in Twitter Bootstrap 3
  30. Disable Bootstrap 3 navbar going 2 rows in medium viewport size

Leave a Comment