Bootstrap: how do I change the width of the container?

Twitter Bootstrap Problem Overview

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?

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

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.

Solution 2 - Twitter Bootstrap

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.

Solution 3 - Twitter Bootstrap

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.

Solution 4 - Twitter Bootstrap

@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;
  }
}

Solution 5 - Twitter Bootstrap

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.

Solution 6 - Twitter Bootstrap

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.

Solution 7 - Twitter Bootstrap

Use a wrapper selector and create a container that has a 100% width inside of that wrapper to encapsulate the entire page.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Now the maximum width is set to 1000px and you need no less or sass.

Solution 8 - Twitter Bootstrap

In bootstrap, Just add this to your .CSS file

.container {
   max-width: 70% !important;/*Set your own width %; */
}

Solution 9 - Twitter Bootstrap

Container sizes

@container-large-desktop
(1140px + @grid-gutter-width) -> (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/

Solution 10 - Twitter Bootstrap

Simply add container to sticky navbar ;

Solution 11 - Twitter Bootstrap

As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in _variables.scss) that powers them:

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

know more

Solution 12 - Twitter Bootstrap

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;
}`

Content Type	Original Author	Original Content on Stackoverflow
Question	alex	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	mcbjam	View Answer on Stackoverflow
Solution 2 - Twitter Bootstrap	albertedevigo	View Answer on Stackoverflow
Solution 3 - Twitter Bootstrap	Bastardo Sucio	View Answer on Stackoverflow
Solution 4 - Twitter Bootstrap	Jeff Schwarting	View Answer on Stackoverflow
Solution 5 - Twitter Bootstrap	Kaizoku Gambare	View Answer on Stackoverflow
Solution 6 - Twitter Bootstrap	Geo	View Answer on Stackoverflow
Solution 7 - Twitter Bootstrap	Larry Judd	View Answer on Stackoverflow
Solution 8 - Twitter Bootstrap	Kipkemoi Derek	View Answer on Stackoverflow
Solution 9 - Twitter Bootstrap	So Santo	View Answer on Stackoverflow
Solution 10 - Twitter Bootstrap	mcbjam	View Answer on Stackoverflow
Solution 11 - Twitter Bootstrap	MD SHAYON	View Answer on Stackoverflow
Solution 12 - Twitter Bootstrap	Mahendra	View Answer on Stackoverflow