Как сделать 5 и 2 колоноки с Bootstrap как на примере?

Question

[relows]

Вот как должно быть:

Answer 1

[relows]

элемент с бордером и паддингом должен быть внутри .col
либо же с использованием flexbox(если не знаете что это, очень советую узнать)

Answer 2

[imullika1]

<div class="container">
    <!-- Первая строка -->
    <div class="row">
       <!-- Первая колонка -->
        <div class="col"></div>
       <!-- Вторая колонка -->
        <div class="col"></div>
    </div>
    <!-- Первая строка -->
    <div class="row">
       <!-- Первая колонка -->
        <div class="col"></div>
       <!-- Вторая колонка -->
        <div class="col"></div>
       <!-- Третья колонка -->
        <div class="col"></div>
       <!-- Четвертая колонка -->
        <div class="col"></div>
       <!-- Пятая колонка -->
        <div class="col"></div>
    </div>
</div>

Comments

[relows]

Это не то. Так я и сам умею :)
Нужно чтобы между колонками(с border) ещё и отступы были.

[dbashkatoff]

relows, элемент с бордером и паддингом должен быть внутри .col

[relows]

dbashkatoff, Большое спасибо

Answer 3

[Алекс Глебов]

https://getbootstrap.com/docs/4.0/layout/grid/

1/5 колонка

.example-col {
  @include make-col-ready();
  @include make-col(1, 5);
  
  
}

Comments

[relows]

Вот что получилось:

<div class="container mb50">
<div class="row">
	<div class="example-col border1px">123</div>
	<div class="example-col border1px">123</div>
	<div class="example-col border1px">123</div>
	<div class="example-col border1px">123</div>
	<div class="example-col border1px">123</div>
</div>
</div>

.example-col {
  @include make-col-ready();
  @include make-col(1, 5);
}

.mb50 {
	margin-bottom: 50px;
}

.border1px {
	border: 1px solid #153557;
}