CODEWITHSUNDEEP
twitter-bootstrap-3
Mike Dymond
Mike Dymond

Reputation: 1185

How to set up different widths for the media breakpoints in Bootstrap

I am pretty new to Bootstrap, so please bear with me. I am trying to set up my CSS for an internal web application I am creating. I have it working perfectly with a default bootstrap.css. However the default screen width are not what is needed as it will be used a lot of very high resolution monitors (as well as tables and possibly phones).

So what I am trying to do is compile my own bootstrap.css that has some new media break values in.

Current

xs = 480px
sm = 768px
md = 992px
lg = 1200px

What I want is

xs = 480px
sm = 992px
md = 1200px
lg = 1600px

or even better would be

xs = 480px
sm = 768px
md = 992px
lg = 1200px
xl = 1600px

However I cannot get this working. I enter the required values in the template, but the css it produces does not scale properly, it does not jump between the small and medium sizes properly.

Bootstrap template

Cheers Mike

Upvotes: 2

Views: 2249

Answers (1)

Schmalzy
Schmalzy

Reputation: 17324

I tried this as well, and got the same results as you...

It seems like the "Customizer" did not update the two of the three media queries that handle the container widths correctly.

You should find these around line 695 in your custom file, after updating the values, it seems to work as expected...

DEMO

@media (min-width: 768px) { /*Should be 992px*/
  .container {
    width: 970px;
  }
}
@media (min-width: 992px) { /*Should be 1200px*/
  .container {
    width: 1170px;
  }
}
@media (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}

I also logged this issue on github See Here. We will see what they say...

Update:

Looks like this was a known issue, and will be fixed with the 3.1 release. See Here

Upvotes: 4

Related Questions