Как правильно сверстать данные блоки на bootstrap 4?

Question

[DeadKing]

Прошу прощения за мой дилетантский вопрос. Как можно сверстать данные два блока на bootstrap 4 или чтоб они были адаптивны.
В первом блоке изображения верстаются по сетке на всю ширину, но как в них вписать текст, чтоб он не выходил за пределы контентной зоны (container).
Во втором блоке структура такая, но как сделать, чтоб background выходил за пределы container?

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
</div>

Answer 1

[Кирилл]

Дайте обертку для контейнера и стилизуйте ей бэкграунд

Answer 2

[Вадим Кот]

Для второй секции https://codepen.io/anon/pen/odzywr
Для первой то же самое, только для wrapper задаете background-image

Answer 3

[ljutaev]

привет) первый экран на бустрапе дела бы так:
.container
- .row
-- .col-md-6.p0
--- .content
-- .col-md-6.p0
--- .row
---- .col-md-12.p0
------.content
-----.col-md-12.p0
------.content

.content центрировал бы через абсолютное поз. с отрицательным transform: translate(-50%, -50%)

Answer 4

[TheRevan]

я бы :after и before бы задал с конкретным цветом фона и шириной овер дофига