How to remove responsive features in Twitter Bootstrap 3?

Question

Since Bootstrap 3 no longer shares files for flexible and standard style sheets. So, how can I easily remove responsive features?

Answer 1

To inactivate non-desktop styles, you just need to change 4 lines of code in the variables.less file. Set the screen breakpoints in the variables.less file as follows:

 // 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 minimum width in the lower format of multimedia content on the desktop so that it applies to all screen widths. Thanks 2calledchaos for improvement! Some basic styles are defined in mobile styles, so we should definitely include them.

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

Answer 2

This is explained in official Bootstrap 3 official docs:

Steps to turn off responses

To disable sensitive features, follow these steps: See Him in action in the modified template below.

• Delete (or just don't add) the <meta> viewport mentioned in CSS docs
• Remove the maximum width on .container for all grid levels with max-width: none! important; and set the correct width as width: 970px ;. Make sure this happens after CSS Bootstrap by default. You can optionally avoid importance with media queries or some selector-fu.
• If you use navbars, cancel all navigation and unfolding behavior (this is too much to show here, so see an example).
• For grid layouts, use the .col-xs- * classes in addition to or instead of medium / large. Don’t worry, the ultra-small grid of devices scales to all resolutions, so you are set up there.

You will still need Respond.js for IE8 (since our media queries still exist and need to be picked up). It just disables the Bootstrap mobile site.

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

Answer 3

Lately, I'll just find out how easy it is to make your bootstrap v3.1.1 immune. This includes navbars so as not to collapse. I don’t know if everyone knows about it, but I would like to share it.

Two steps to unresponsive Bootsrap v3.1.1

First create the css file name as not-responsive.css. Be sure to add it to your themes or link immediately after the css boot files.

Secondly, paste this code into your non-responsive.css file:

 /* 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 an example at getbootstrap.com .

Answer 4

I needed to completely remove the responsive Bootstrap function, I ended up overriding it 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

Answer 5

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

• Omit the <meta> viewport specified in CSS documents
• Override width in .container for each grid level with a single width, for example width: 970px !important; Make sure this happens after standard Bootstrap CSS. You can optionally avoid !important with multimedia queries or some selector-fu.
• If you use navbars, remove all step-by-step and enhanced navigation behavior.
• For grid layouts, use the .col-xs-* classes in addition to or instead of medium / large. Don’t worry, the ultra-small grid of devices scales to all resolutions.

Answer 6

You can do this using CSS Bootstrap 3 with immunity features

https://github.com/bassjobsen/non-responsive-tb3

Answer 7

If you need a site with a fixed size, this should be pretty simple:

 // Override container sizes @container-sm: 700px; @container-md: 700px; @container-lg: 700px; // Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px) @screen-xs-min: 0px; @screen-sm-min: 1px; @screen-md-min: 9999px; @screen-lg-min: 9999px; // Disable responsive features such as navbar-collapse @grid-float-breakpoint: 1; 

If you are not using .container-fluid, add also:

 .container-fluid { width: 700px; } body { width: 700px + @general-min-width; } 

Answer 8

Take a look at www.goo.gl/2SIOJj , this is a work in progress, but it can help you.

I use a cookie to determine if I want to have a desktop or responsive version. In the page footer you can find two spans in general. Js is a script for handling clicks.

  <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div> <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div> function setMobDeskCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value + "; path=/"; window.location.reload(); } $(function() { $(".make_desktop").click(function() { setMobDeskCookie('deskmob', 1, 3650); }); $(".make_responsive").click(function() { setMobDeskCookie('deskmob', 0, 3650); }); });`enter code here` 

i finished splitting all my own CSS into two files, I do not use bootstrap navigation, but my own, so this is most of my custom styles, so this will not solve your problem but it works for me

and I also created not-responsive.css which forces the grid to support a larger version of the screen

in case you chose mobile, I would upload / echo

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Bootstrap core CSS and JS --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet"> <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script> and load these stylesheets <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" /> <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" /> 

in case you select the desktop, I would load / echo

 <meta name="viewport" content="width=1024"> <!-- Bootstrap core CSS and JS --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet"> <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script> <!-- Main CSS --> <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" /> <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" /> 

non-responsive.css is one that has overrides for bootstrap. I am worried about the layout, so there is not much there, given that I handle the navigation in my own way, so css is for it, and the rest of the bits are in my other css files

note that my setup behaves like a desktop even on desktop browsers, unlike some other solutions that I saw that would ignore only the viewport, which, apparently, was downloaded only to mobile devices for me.