Bootstrap how do I change the width of the container

Question

I have used Twitter Bootstrap to develop a website with the fixed container class  but now the client wants the website to be 1000px width and not 1170px  I don t use the  less files   Is there a quick way to fix this

User · Answer

For bootstrap 4 if you are using Sass here is the variable to edit

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

To override this variable I declared $container-max-widths without the !default in my .sass file before importing bootstrap.

Note : I only needed to change the xl value so I didn't care to think about breakpoints.

User · Answer

mcbjam already gave this answer but here s a bit more explanation   You can easily make the change using a media query in your CSS file without downloading BS  I just did this and it works beautifully   The media query s  min-width  value will tell CSS to change the width of your container to 1000px only on screens larger than 1200px  or whatever width you choose to include there   This preserves the responsiveness of your site  so when the screen size jumps below that value  smaller monitor  tablet  smartphone  etc    your site will still adjust to fit the smaller screens    media  min-width  1200px       container       width  1000px

User · Answer

You are tying one had behind your back saying that you won t use the LESS files   I built my first Twitter Bootstrap theme using 2 0  and I did everything in CSS -- creating an override css file   It took days to get things to work correctly   Now we have 3 0   Let me assure you that it takes less time to learn LESS  which is pretty straight forward if you re comfortable with CSS  than doing all of those crazy CSS overrides   Making changes like the one you want is a piece of cake     In Bootstrap 3 0  the container class controls the width  and all of the contained styles adjust to fill the container   The container width variables are at the bottom of the variables less file      Container sizes    --------------------------------------------------     Small screen   tablet  container-tablet               720px    grid-gutter-width        Medium screen   desktop  container-desktop              940px    grid-gutter-width        Large screen   wide desktop  container-lg-desktop           1020px    grid-gutter-width      Some sites either don t have enough content to fill the 1020 display or you want a narrower frame for aesthetic reasons   Because BS uses a 12-column grid I use a multiple like 960

User · Answer

Add these piece of CSS in your css styling  Its better to add this after the bootstrap css file is added in order to overwrite the same     html  body    height  100    max-width  100    overflow-x  hidden

User · Answer

Set your own content container class with 1000px width property and then use container-fluid boostrap class instead of container   Works but might not be the best solution

User · Answer

Here is the solution     media  min-width  1200px         container          max-width  970px            The advantage of doing this  versus customizing Bootstrap as in  Bastardo s answer  is that it doesn t change the Bootstrap file   For example  if using a CDN  you can still download most of Bootstrap from the CDN

User · Answer

Container sizes   container-large-desktop  1140px    grid-gutter-width  - gt   970px    grid-gutter-width    in section Container sizes  change 1140 to 970  I hope its help you     thank you for your correct  link for customize bootstrap  https   getbootstrap com docs 3 4 customize

User · Answer

Use a wrapper selector and create a container that has a 100  width inside of that wrapper to encapsulate the entire page    lt style gt  wrapper  width  1000px     wrapper  container  max-width  100   display  block   lt  style gt   lt body gt   lt div id  wrapper  gt     lt div class  container  gt       lt div class  row  gt        Now the maximum width is set to 1000px and you need no less or sass

User · Answer

Go to the Customize section on Bootstrap site and choose the size you prefer  You ll have to set  gridColumnWidth and  gridGutterWidth variables   For example   gridColumnWidth   65px and  gridGutterWidth   20px results on a 1000px layout   Then download it

User · Answer

Simply add container to sticky navbar

[twitter-bootstrap] Bootstrap: how do I change the width of the container?

Examples related to twitter-bootstrap