Как в bootstrap 4 поменять размер container?

Question

[Underdoggit]

Возник вопрос, у меня макет с шириной контейнера 1230 пикселей, стандартный размер контейнера 1140 пикселей у бутстрап 4, как поменять размер контейнера в 4 бутстрапе, что бы верстать pixel perfect, или не заморачиваться с ним и ставить container-fluid и двигать его margin\padding?

Answer 1

[NaN]

создай свой класс типо container-my и присвой ему нужный max-width и пиши его вместо container:

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

Или так:

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

Или можно переопределить переменные, отвечающие за размеры контейнера. (это что-то вроде container-sm, condainer-md). Не помню как точно называются. Смотря что больше вам подходит выбирайте.

Answer 2

[Yustas Alexu]

Приведу пример как я делал в своем проекте (бутстрап ставится через npm, но это не принципиально):
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;

Нужные переменные можно посмотреть в исходниках бутстрапа, куда смотреть написано в документации.

Comments

[Underdoggit]

Отличный вариант, возьму его на заметку в свою работу) спасибо)

Answer 3

[Underdoggit]

Спасибо за ответ, а это никаким образом не скажется на брейкпоинтах и дальнейшей адаптивностью этого макета? Не вылезут подводные камни? Так как в 3 версии там по мимо того как задаешь основную ширину контейнера для desktop версии сайта, нужно было еще переопределять контейнер для медиа свойств.

Comments

[NaN]

В 3 бутстрапе за брейкпоинты тоже отвечают переменные и называются screen-xs и т.д Скорее всего если вы меняете значения переменных для контейнера, то может нужно будет и для брейкпоинтов, от скорее от дизайна зависит. Тут лучше несколько раз все проверить, изменить сначала одно значение, а потом смотреть нужно ли что-то еще.

[Underdoggit]

NaN, спасибо, буду шаманить)