Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter bootstrap: get rid of 1200px large display how?

If you look at: http://twitter.github.com/bootstrap/scaffolding.html#responsive they have categories for nearly every device. I'd like to eliminate the last support device entry:

Large display   1200px and up   70px    30px

I'm a backend programmer, not a designer, so my css knowledge is limited. Can someone point me to the files I would need to modify in order to get rid of support for large display?

Thanks!

(PS if anyone is wondering why I would do this, it's corporate standard blah blah blah 1024px blah blah.)

like image 283
Jonathan S. Fisher Avatar asked Jul 07 '12 05:07

Jonathan S. Fisher


People also ask

Is twitter bootstrap responsive?

With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

Is Bootstrap adaptive or responsive?

Bootstrap is built on responsive 12-column grids, layouts, and components.

Are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes?

Responsive breakpoints These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

How can set mobile width in Bootstrap?

With the help of media queries, Bootstrap gives different widths to the . container depending on the size of the device: Extra small devices (<768px): width: auto (or no width) Small Devices (≥768px): width: 750px.


2 Answers

If you are using the maxcdn version of bootstrap or just dont want to touch the source, just paste place the following css after loading the bootstrap stylesheet.

@media (min-width: 1200px) {
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
      width: 940px;
    }
    .row-fluid {
      width: 100%;
      *zoom: 1;
    }
    .row-fluid:before,
    .row-fluid:after {
      display: table;
      content: "";
      line-height: 0;
    }
    .row-fluid:after {
      clear: both;
    }
    .row-fluid [class*="span"] {
      display: block;
      width: 100%;
      min-height: 30px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      float: left;
      margin-left: 2.127659574468085%;
      *margin-left: 2.074468085106383%;
    }
    .row-fluid [class*="span"]:first-child {
      margin-left: 0;
    }
    .row-fluid .controls-row [class*="span"] + [class*="span"] {
      margin-left: 2.127659574468085%;
    }
    .row-fluid .span12 {
      width: 100%;
      *width: 99.94680851063829%;
    }
    .row-fluid .span11 {
      width: 91.48936170212765%;
      *width: 91.43617021276594%;
    }
    .row-fluid .span10 {
      width: 82.97872340425532%;
      *width: 82.92553191489361%;
    }
    .row-fluid .span9 {
      width: 74.46808510638297%;
      *width: 74.41489361702126%;
    }
    .row-fluid .span8 {
      width: 65.95744680851064%;
      *width: 65.90425531914893%;
    }
    .row-fluid .span7 {
      width: 57.44680851063829%;
      *width: 57.39361702127659%;
    }
    .row-fluid .span6 {
      width: 48.93617021276595%;
      *width: 48.88297872340425%;
    }
    .row-fluid .span5 {
      width: 40.42553191489362%;
      *width: 40.37234042553192%;
    }
    .row-fluid .span4 {
      width: 31.914893617021278%;
      *width: 31.861702127659576%;
    }
    .row-fluid .span3 {
      width: 23.404255319148934%;
      *width: 23.351063829787233%;
    }
    .row-fluid .span2 {
      width: 14.893617021276595%;
      *width: 14.840425531914894%;
    }
    .row-fluid .span1 {
      width: 6.382978723404255%;
      *width: 6.329787234042553%;
    }
    .row-fluid .offset12 {
      margin-left: 104.25531914893617%;
      *margin-left: 104.14893617021275%;
    }
    .row-fluid .offset12:first-child {
      margin-left: 102.12765957446808%;
      *margin-left: 102.02127659574467%;
    }
    .row-fluid .offset11 {
      margin-left: 95.74468085106382%;
      *margin-left: 95.6382978723404%;
    }
    .row-fluid .offset11:first-child {
      margin-left: 93.61702127659574%;
      *margin-left: 93.51063829787232%;
    }
    .row-fluid .offset10 {
      margin-left: 87.23404255319149%;
      *margin-left: 87.12765957446807%;
    }
    .row-fluid .offset10:first-child {
      margin-left: 85.1063829787234%;
      *margin-left: 84.99999999999999%;
    }
    .row-fluid .offset9 {
      margin-left: 78.72340425531914%;
      *margin-left: 78.61702127659572%;
    }
    .row-fluid .offset9:first-child {
      margin-left: 76.59574468085106%;
      *margin-left: 76.48936170212764%;
    }
    .row-fluid .offset8 {
      margin-left: 70.2127659574468%;
      *margin-left: 70.10638297872339%;
    }
    .row-fluid .offset8:first-child {
      margin-left: 68.08510638297872%;
      *margin-left: 67.9787234042553%;
    }
    .row-fluid .offset7 {
      margin-left: 61.70212765957446%;
      *margin-left: 61.59574468085106%;
    }
    .row-fluid .offset7:first-child {
      margin-left: 59.574468085106375%;
      *margin-left: 59.46808510638297%;
    }
    .row-fluid .offset6 {
      margin-left: 53.191489361702125%;
      *margin-left: 53.085106382978715%;
    }
    .row-fluid .offset6:first-child {
      margin-left: 51.063829787234035%;
      *margin-left: 50.95744680851063%;
    }
    .row-fluid .offset5 {
      margin-left: 44.68085106382979%;
      *margin-left: 44.57446808510638%;
    }
    .row-fluid .offset5:first-child {
      margin-left: 42.5531914893617%;
      *margin-left: 42.4468085106383%;
    }
    .row-fluid .offset4 {
      margin-left: 36.170212765957444%;
      *margin-left: 36.06382978723405%;
    }
    .row-fluid .offset4:first-child {
      margin-left: 34.04255319148936%;
      *margin-left: 33.93617021276596%;
    }
    .row-fluid .offset3 {
      margin-left: 27.659574468085104%;
      *margin-left: 27.5531914893617%;
    }
    .row-fluid .offset3:first-child {
      margin-left: 25.53191489361702%;
      *margin-left: 25.425531914893618%;
    }
    .row-fluid .offset2 {
      margin-left: 19.148936170212764%;
      *margin-left: 19.04255319148936%;
    }
    .row-fluid .offset2:first-child {
      margin-left: 17.02127659574468%;
      *margin-left: 16.914893617021278%;
    }
    .row-fluid .offset1 {
      margin-left: 10.638297872340425%;
      *margin-left: 10.53191489361702%;
    }
    .row-fluid .offset1:first-child {
      margin-left: 8.51063829787234%;
      *margin-left: 8.404255319148938%;
    }
}

Basically it enforces the 960px css for the 1200px.

like image 116
Kamal Khan Avatar answered Nov 09 '22 06:11

Kamal Khan


Ok this wasn't that hard, starting on line 437 of bootstrap-responsive.css, remove this entire section:

@media (min-width: 1200px) {
...
}

Now just change this one line

@media (max-width: 979px) {

to this:

@media (min-width: 1200px) {

easy hack!

EDIT better explanation:

If you look at bootstrap-responsive.css, and you look at all the crap except the "Media Queries" you'd be left with basically the following outline:

/* Landscape phones and down */
  @media (max-width: 480px) { ... }

  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) { ... }

  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }

  /* Desktop */
  @media (max-width: 979px) { ... }

  /* Large desktop */
  @media (min-width: 1200px) { ... }

See how it gradually scales up? What I did is remove the last section, then changed the 2nd to last to take it's place.

EDIT:

BTW, if you use the boostrap customization wizard, you can do this on their GUI by unselecting large monitor support.

like image 25
Jonathan S. Fisher Avatar answered Nov 09 '22 05:11

Jonathan S. Fisher