Need to create wider container in Bootstrap - 1920px

Question

I have .psd design for client site, graphic designer drew container width up to 1920px, and I need a help how to properly set up width of container to 1920px.

I know how to set up smaller

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

Solution 1

Instead of forcing your containers to 1920px and overriding the default bootstrap grid sizes, you may want to look at .container-fluid, which is inside Bootstrap's packaged css.

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

<div class="container">
    ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
    ...
</div>

Link: http://getbootstrap.com/css/#overview-container

Solution 2

You could utilize Bootstrap's container-fluid class to fill the entire width first, then you can restrict the width responsively... Here is an example in Sass:

.wide-container {
    @extend .container-fluid; // which has max-width: auto; (full)
}

// on medium screens and beyond...
@include media-breakpoint-up(md) {
    .wide-container {
        max-width: 1470px; // limit the width here!
    }
}

Solution 3

Just reuse the media query you have above, and simply decide when you want the container to change to that size (something greater than 1920px).

   @media (min-width: YOUR VALUE HERE)
    .container {
          width: 1920px;
    }

OR, upon reading your question again, you said, "up to 1920px", so a fluid container? Then simply set:

.container {
      max-width: 1920px;
      width: 100%;
}

Solution 4

Your problem is not clear enough. but if you want to set up 1920px wide container, just override the default container width with "!important". like this,

.container { width: 1920px !important; }

Or if you wish to 1920px container only for larger displays, you can use media query like this,

@media (min-width: 2400px) {
  .container {
      width: 1920px; 
  }
}

this rule will apply only for displays that is at least 2400px wide.

Solution 5

You can apply your own CSS according to the screen size you want to show as the below example will work on a larger resolution size than 1599px.

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

View more solutions

Comments

[Mile Mijatović]

I want in every moment width of container to be 1920px, not up to, sorry my fault. My monitor is 1200px resolution, but I must use 1920px

[Mile Mijatović]

I want in every moment width of container to be 1920px, not up to, sorry my fault. My monitor is 1200px resolution, but I must use 1920px

[JesseEarley]

then you just need to set: .container{ width: 1920px}

[Mile Mijatović]

thanks, that's it... but now I have another question, how will it affect the responsive design, when I resize the browser window?

[Chathura Buddhika]

@MileMijatović responsive means you are setting different settings for different width sizes. So if you use .container { width: 1920px !important; }, then thats the resolution for all browser widths. If you want to preserve responsiveness, you have to define media queries for different browser sizes

[Vikas Kandari]

this will always set container to 1920px even in mobile

[David Wilkinson]

@VikasKandari True but you could just wrap in a media query instead - updated answer accordingly.

[Vikas Kandari]

wide class doesnt require just put media query rule at the bottom other other rules or just put css stylesheet after bootstrap css this will overwrite container properties when width exceeds min-width in media query rule

[David Wilkinson]

@VikasKandari I prefer adding my own classes so I don't directly override Bootstrap's classes. This makes it easier to revert back to core Bootstrap if you need to.

[Vikas Kandari]

Down voted - this will always set container to 1920px even in mobile