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 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

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

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

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

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

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

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  gt  li     float  left     navbar-nav  gt  li  gt  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  gt  li  gt  a     color   333     navbar  navbar-nav  open  dropdown-menu  gt  li  gt  a hover   navbar  navbar-nav  open  dropdown-menu  gt  li  gt  a focus   navbar  navbar-nav  open  dropdown-menu  gt   active  gt  a   navbar  navbar-nav  open  dropdown-menu  gt   active  gt  a hover   navbar  navbar-nav  open  dropdown-menu  gt   active  gt  a focus     color   fff  important    background-color   428bca  important     navbar  navbar-nav  open  dropdown-menu  gt   disabled  gt  a   navbar  navbar-nav  open  dropdown-menu  gt   disabled  gt  a hover   navbar  navbar-nav  open  dropdown-menu  gt   disabled  gt  a focus     color   999  important    background-color  transparent  important      That s all and Enjoy      Source  non-responsive css from the example at getbootstrap com

[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