CODEWITHSUNDEEP
cssresponsive-designtwitter-bootstrap-3
user1448031
user1448031

Reputation: 2166

Bootstrap 3: How to use custom container width?

In Bootstrap 3, the container width for large device is set to 1170px. I want to change this to a higher value such as 1500px. Can I simply change the width of .container to 1500px or is it going have side effects in other elements? Do I also have to change the widths of the container for medium and small devices? How do I ensure it does not break my design?

Upvotes: 2

Views: 3131

Answers (3)

Shawn Taylor
Shawn Taylor

Reputation: 15740

Definitely don't change the .container width inline, as that will cut-off on smaller screens. Easiest is to add this to your css:

@media (min-width: 1500px) {
  .container {
    width: 1470px;
  }
}

When a screen is 1500px and up, your container will fill it, but it won't make any difference to screens/browser windows between 1200px and 1500px, or smaller.

Here's a Bootply

ps - my Bootply is set to ~1400px because that's how wide my MBPr is - pretty common max width.

Upvotes: 2

paulalexandru
paulalexandru

Reputation: 9530

Download bootstrap directly from thier main website http://getbootstrap.com/customize/#container-sizes and customize it as you wish. The url i provided you takes you directly to the container size section and all you have to do is to change it and after that download the bootstrap files.

Upvotes: 0

Pete TNT
Pete TNT

Reputation: 8403

Download a copy of Bootstrap from GitHub and modify the this line on variables.less

@container-large-desktop:      ((1140px + @grid-gutter-width));

to your liking:

@container-large-desktop:      ((1500px + @grid-gutter-width));

If you are not familiar with LESS, read up on it here and compile bootstrap.css file with a LESS compiler such as Koala

Upvotes: 3

Related Questions