How to resize container in bootstrap 4?

Question

css

The question arose, I have a layout with a container width of 1230 pixels, the standard size of the container is 1140 pixels in bootstrap 4, how to change the size of the container in bootstrap 4 to make it pixel perfect, or not bother with it and set container-fluid and move its margin\ padding?

Answer 1

create your own class like container-my and give it the desired max-width and write it instead of container:

.container-my {
    max-width: 1260px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
}

Or like this:

.container-my {
    @extend .container;
    max-width: 1260px;   
}

Or you can override the variables responsible for the size of the container. (it's something like container-sm, condainer-md). I don't remember exactly what they are called. Depending on what suits you best, choose.

Answer 2

I will give an example as I did in my project (bootstrap is installed via npm, but this is not important):
app.scss:

@import 'custom';
@import '~bootstrap/scss/bootstrap';
@import 'main';

custom.scss:

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1920px
);

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

$colors: (
        blue: #1799d3,
        pink: #e20073
);

$theme-colors: (
        primary: #1799d3,
        pink: #e20073
);

$body-color: #444;
$line-height-base: 1.2;

The necessary variables can be found in the bootstrap sources, where to look is written in the documentation.

Answer 3

Thanks for the answer, but will this in any way affect the breakpoints and further adaptability of this layout? Pitfalls will not come out? Since in version 3 there, in addition to setting the main width of the container for the desktop version of the site, it was also necessary to redefine the container for media properties.