Как правильно сверстать такую сетку bootstrap 4?

Question

[Илья]

Вот такой макет:

У синего блока есть фон, красный это input.
Если я сделаю .row>.col-7>.row>.col-?>input
То .col-7>.row разделиться на свои 12 столбцов и уже тогда не получиться получить 5/12 от общей ширины:

Как правильно сверстать это, что бы input был 5/12 от общего .row ?

Comments

[Дмитрий]

Какая версия бутстрапа?
Для 3 версии - можно кастомизировать сетку https://getbootstrap.com/docs/3.3/customize/
Для 4 версии - проще - она флексах

[Илья]

Дмитрий, bootstrap v4.1

[Дмитрий]

здесь не получиться так сделать - отдельно блок с позиционируйте внутри - без сетки

[Илья]

Дмитрий, предлагаете просто отступы сделать равные одному столбцу?

[Дмитрий]

получается блок col-5 будет занимать ширину нет от .row, а от блока родителя col-7
col-7 = 7/12 = 58.33%

col-5 5/12 = 41.67% ширины от блока .col-7

Answer 1

[Froggyweb]

@include make-col($size, $columns: $grid-columns);
@include make-col(5, 7);

Comments

[Илья]

Дополните пожалуйста источником и отмечу как ответ

[Илья]

https://getbootstrap.com/docs/4.1/layout/grid/#mixins