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

User · Answer

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.

User · Answer

Look at www goo gl 2SIOJj it is a work in progress but it may help you   I use cookie to define if i want desktop or responsive version  In the footer of the page you can find two spans and in general js is the script to handle the clicks             lt div class  col-xs-6  style  text-align center   gt  lt span class  make desktop  gt Desktop lt  span gt  lt  div gt           lt div class  col-xs-6  style  text-align center   gt  lt span class  make responsive  gt Mobile lt  span gt  lt  div gt   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 ended up splitting all my custom css into two files i don t use bootstrap navigation but my own so that is majority of my custom styles  so it will not resolve your entire problem but it works for me  and i also created non-responsive css that forces the grid to maintain the large screen version  in case u select mobile i would load   echo    lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no  gt     lt  -- Bootstrap core CSS and JS -- gt           lt script type  text javascript  src    ajax googleapis com ajax libs jquery 1 8 2 jquery min js  gt  lt  script gt           lt link href   themes responsive lime bootstrap-3 1 1 css bootstrap css  rel  stylesheet  gt           lt script src   themes responsive lime bootstrap-3 1 1 js bootstrap min js  gt  lt  script gt   and load these stylesheets  lt link rel  stylesheet  type  text css  media  screen print  href   themes responsive lime css style css modified 14-06-2014-12-27-40    gt   lt link rel  stylesheet  type  text css  media  screen print  href   themes responsive lime css style-responsive css modified 1402758346    gt    in case you select desktop i would load  echo   lt meta name  viewport  content  width 1024  gt                 lt  -- Bootstrap core CSS and JS -- gt           lt script type  text javascript  src    ajax googleapis com ajax libs jquery 1 8 2 jquery min js  gt  lt  script gt           lt link href   themes responsive lime bootstrap-3 1 1 css bootstrap css  rel  stylesheet  gt           lt script src   themes responsive lime bootstrap-3 1 1 js bootstrap min js  gt  lt  script gt            lt  -- Main CSS -- gt           lt link rel  stylesheet  type  text css  media  screen print  href   themes responsive lime css style css modified 14-06-2014-12-27-40    gt   lt link rel  stylesheet  type  text css  media  screen print  href   themes responsive lime css non-responsive css modified 1402758635    gt    the non-responsive css is the one that has overrides for bootstrap my concern is layout so there is not much in there  given that i handle the navigation in my own way so css for it and the other bits is in my other css files  please note that my setup does behave as desktop even on desktop browsers unlike some other solutions i have seen that will only ignore the viewport that seems to have wotked only on mobile devices for me

User · Answer

Source from  http   getbootstrap com getting-started  disable-responsive   Omit the viewport  lt meta gt  mentioned in the CSS docs 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  If using navbars  remove all navbar collapsing and expanding behavior  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

User · Answer

You can do that by using the Bootstrap 3 CSS with non-responsive features   https   github com bassjobsen non-responsive-tb3

User · Answer

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          Remove  or just don t add  the viewport  lt meta gt  mentioned in the CSS docs   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    If using navbars  undo all the navbar collapsing and expanding behavior  this is too much to show here  so peep the example     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

User · Answer

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

User · Answer

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

User · Answer

If you want a fixed size website this should be fairly simple    x000D   x000D     Override container sizes x000D   container-sm  700px  x000D   container-md  700px  x000D   container-lg  700px  x000D   x000D     Fixate media queries to tablet view only  lower viewports set to 0px  desired one to 1px  and the higher to  9999px  x000D   x000D   screen-xs-min  0px  x000D   screen-sm-min  1px  x000D   screen-md-min  9999px  x000D   screen-lg-min  9999px  x000D   x000D     Disable responsive features such as navbar-collapse x000D   grid-float-breakpoint  9999px  x000D   x000D   x000D    Unless you are using  container-fluid  then also add    container-fluid       width  700px    body       width  700px    general-min-width

[twitter-bootstrap] How to remove responsive features in Twitter Bootstrap 3?

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to media-queries

Examples related to twitter-bootstrap-3