How to remove responsive features in Twitter Bootstrap 3?

Question

Since Bootstrap 3 there's no longer seperate files for responsive and standard stylesheets. So how can I easily remove the responsive features?

Solution 1

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

Solution 2

This is explained in the official Bootstrap 3 release docs:

Steps to disable responsive views

To disable responsive features, follow these steps. See it in action in the modified template below.

1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
2. Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).
4. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.

You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

See also the example on GetBootstrap.com/examples/non-responsive/

Solution 3

I just figure it out lately on how easy it is to make your bootstrap v3.1.1 being non-responsive. This includes navbars to not to collpase. I don't know if everyone knows this but I'd like to share it.

Two Steps to a Non-responsive Bootsrap v3.1.1

First, create a css file name it as non-responsive.css. Make sure to append it to your themes or link right after the bootstrap css files.

Second, paste this code to your non-responsive.css:

/* Template-specific stuff
 *
 * Customizations just for the template; these are not necessary for anything
 * with disabling the responsiveness.
 */

/* Account for fixed navbar */
body {
  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
}

/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}


/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/* Reset the container */
.container {
  width: 970px;
  max-width: none !important;
}

/* Demonstrate the grids */
.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}

That's all and Enjoy..^^

Source: non-responsive.css from the example at getbootstrap.com.

Solution 4

Source from: http://getbootstrap.com/getting-started/#disable-responsive

1. Omit the viewport <meta> mentioned in the CSS docs
2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, remove all navbar collapsing and expanding behavior.
4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

Solution 5

I needed to completely remove the Bootstrap responsive feature, i ended up overriding the behavior with the following snippet:

.container {
    width: 960px !important;
}

@media (min-width: 1px) {
  .container {
    max-width: 940px;
  }
  .col-lg-1,
  .col-lg-2,
[...]

Full snippet: https://gist.github.com/ivanminutillo/8557293

View more solutions

Comments

[bbill]

This blog post has some information about doing it, and a link at the end to a completed version on Github.

[kanarifugl]

@STLDeveloper asked Dec 3 '12 at 16:11. Bootstrap 3 is 2 days old or something.

[bbill]

@STLDeveloper, he's saying that the responsive files are no longer separate in Bootstrap 3. The blog post and Bootstrap's Github account explain the changes.

[Nicolas Janel]

The bootstrap documentation describes how to do it : getbootstrap.com/getting-started/#disable-responsive

[Dmytro]

@NicolasJanel your link is dead.

[Nicolas Janel]

Here is the new link to the official documentation to disable responsivness : getbootstrap.com/docs/3.3/getting-started/#disable-responsiv‌​e

[Chris]

You can also stop the navbar from stacking by changing the @grid-float-breakpoint variable to 1px.

[chris]

wow, this works also in the online compiler on the bootstrap custom download site!

[user1995781]

Nice, but too bad it is full complete set of bootstrap css. It would be nice to have the css with only to disable the responsive features. Let say we name it "nonresponsive.css". That way, if we include nonresponsive.css, the responsive reature is disabled. If remove that css, the responsive is restored.

[ɐsɹǝʌ ǝɔıʌ]

You can do what you suggested just by adding at the headers the original bootstrap.css and the non-responsive bootstrap.css posted on the above link. Obviously you can rename it as you want. Comment out the line and then it will works as desired.

[user1995781]

Yeah, but that will override all my custom bootstrap theme. For example, if I use theme from bootswatch.com, it will be overridden by that css.

[ɐsɹǝʌ ǝɔıʌ]

Of course. If you are using a custom theme over bootstrap you'll lose all your customizations, but not in case you uses the original bootstrap CSS

[Ziyan Junaideen]

This didn't work for me. Some elements respond to width of view port.

[Martin Suchanek]

I'm not sure the above works. If someone defines @media (min-width: @screen-sm-min) (meaning apply this style to sm breakpoint and all higher breakpoints; that is, sm, md, lg), the above overrides would break that assumption, as the definition would no longer be applied to md? I set @screen-xs to 1px and @screen-sm to 1px as well (in addition to @screen-md being 1px); this way, all xs, sm, and md styles are applied, overriding themselves with source order precedence.

[2called-chaos]

It is better to use 1px for xs, 2px for sm, 3px for md and 9999px for lg. This way you don't have navbars and modals in "mobile mode".

[Ronald Araújo]

Woow very nice! Thanks :)

[Cichy]

works, but browser horizontal scrollbar still missing

[ba0708]

Please link to the source of your code when you copy/paste it here.

[Adrien Be]

1st thing to note: this means *-md-* will be taken into account (not *-lg-* as some could think)

[Adrien Be]

2nd thing to note: if you use Bootstrap's grid, *-xs-* and *-sm-* styles will still be taken into account if no *-md-* is present on a given tag. As seen on getbootstrap.com/css/#grid "Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present."

[Adrien Be]

@ZiyanJunaideen you probably missed something. Can you provide a jsfiddle?

[Dave Stewart]

This worked for me. I think it should be marked as the correct answer.