Как можно сверстать данный блок с помощью Bootstrap?

Question

[Даниил Емелин]

Я про блок со слайдером в левой части и картинкой в правой. Сложность в том, что текст находится в контейнере, а розовый фон за пределами контейнера. Как такое можно реализовать?

Comments

[Сергей delphinpro]

Ну расположить же фон за пределами контейнера!

.background > .container

Какие проблемы?

[Даниил Емелин]

Сергей: Спасибо, получилось :)

Answer 1

[Александр Белькевич]

Как вариант.. Можно высчитывать расстояние от контейнера до левого края экрана. Брать эту ширину. И контейнеру задавать :before с высчитанной шириной

Answer 2

[Василь Бойко]

.block:before,
.block:after{
	background: red;
	width: 5000px;
	height: 100%;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	pointer-events: none;
	z-index: 0;
}

.block:before{
	right: 100%;
}


.block:after{
	left: 100%;
}

Answer 3

[Андрей Б.]

Как правильно спланировать поставить дивы чтобы св...
Секция с двумя колонками в контейнере и двойным фоном?

Answer 4

[I'm Yoda]

Например так:

<div class="container">
     <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
               текст который сверху
          </div>
     </div>
     <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-6">
               текст который снизу слева
          </div>
          <div class="col-md-6 col-sm-6 col-xs-6">
               картинка справа снизу
          </div>
     </div>
</div>