Как кастомизировать Бутстрап 4 сетку?

Question

[Raul Abdullin]

Только начинаю осваивать данную сетку. Причем на данном этапе пока что исключительно css, т.е. sass не предлагайте пожалуйста. Например, хочу увеличить или уменьшить отступы между колонками или размер контейнера сделать не 1170, а 1250 и тд. Подскажите, как это делается в 4й версии пожалуйста?

Answer 1

[Troodi Larson]

getbootstrap.com/docs/3.3/customize Для простоты вот тут кастомизация, если хотите научиться, то сверяйте изменения.

Comments

[Raul Abdullin]

Я спросил про 4 бутстрап.

Answer 2

[NaN]

Начиная с заголовка Variables
https://v4-alpha.getbootstrap.com/layout/grid/

Comments

[Raul Abdullin]

т.е. вот это take.ms/v1B6y ?

[NaN]

raulvodov, да, нужно переопределить эти переменные в отдельном файле, после чего подключить bootstrap

[Raul Abdullin]

KornevaViktoria, а не могли бы поподробнее описать, как переопределить и что написать? Я начинающий верстальщик прошу прощения за глупые вопросы

[NaN]

1. Создаете файл, например, _bootstrap.scss.
   
2. Переопределяете переменные, которые вам нужны, например:
   

   $grid-breakpoints:(
           xs: 0,
           sm: 576px,
           md: 768px,
           lg: 1001px,
           xl: 1921px
   );

   
   
3. После всех переменных в том же файле подключаете bootstrap:
   

   @import "../libs/bootstrap-4.0.0-alpha.6/scss/bootstrap";

   
   
   
4. Далее этот файл _bootstrap.scss импортируете в ваш индексный файл со всеми стилями
   @import "bootstrap";
   
   

[NaN]

Не бойтесь, что это scss. Если вы используете редактор, к примеру web storm там можно настроить перевод scss to css. Либо воспользуйтесь online конвертерами. К тому же scss очень похож на css с некоторыми плюшками). Если никогда не использовали переменные, то как вариант можете в редакторе переходить по переменным и найти классы. Но это очень муторно. Советую изучить scss. Дня хватит для понимания)

[NaN]

Кстити в css это будет выглядеть примерно так

@media (min-width: 576px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 576px) {
  .container {
    width: 540px;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    width: 720px;
    max-width: 100%;
  }

Но это чисто посмотреть)

[NaN]

А размер контейнера можете задать после подключения bootstrap

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

И использовать вместо .container в html новый этот класс .your-container