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?
This question is related to
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.
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.
@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;
}
}
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.
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.
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;
}`
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/
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.
Simply add container to sticky navbar ;
Source: Stackoverflow.com