Контент на сайте занимает 1170px. Как залить остальное место так, чтоб где светлые блоки не было заливки(белое), где темные- залить черным?

Question

[Jacksnow]

Всем здарова. Сделал сайт, использовал бутстрап. Ширина контента 1170px. Нужно залить справа и слева оставшееся расстояние так, чтоб где темные блоки заливка была черной, где белая не заливать(оставить белым). Я понимаю, что можно на боди картинку наложить, но хочется, сделать на ксс, чтоб загрузка быстрее была. Вот, что я имею ввиду:

Comments

[Hyubert]

codepen.io/Hyubert/pen/LbwpbQ

Answer 1

[iBird Rose]

<div class="section-1"> //черный
	<div class="container">111</div>
</div>
<div class="section-2"> //белый
	<div class="container">111</div>
</div>
<div class="section-3"> //черный
	<div class="container">111</div>
</div>

Comments

[Jacksnow]

нужно учесть еще, что сайт сделан на бутстрапе, а бутстраповские колонки в обычные дивы нельзя запихнуть, как поступить?

[iBird Rose]

Jacksnow: а куда ты собрался колонки пихать?

[iBird Rose]

Jacksnow: и я хз о чем ты. создаешь row где угодно и пихаешь туда col.

[Jacksnow]

iBird Rose: получается мне row задать width 100% и быкграунд черный?

[Jacksnow]

iBird Rose: я имею ввиду, что у меня один контейнер в котором весь контент сайта находится, и у него ограничения 1170px в ширину.

[Владимир]

Jacksnow: убери один контейнер и задай ограничение строкам

[iBird Rose]

Jacksnow: я тебе в ответе показал что тебе нужно разделить контейнеры.

[iBird Rose]

Jacksnow: сколько секций на сайте будет - столько .container и делай

Answer 2

[Владимир]

Заключай каждый блок в свой враппер (div) врапперу давай ширину сто процентов а внутреннему блоку максимальную ширину 1170

Comments

[Jacksnow]

нужно учесть еще, что сайт сделан на бутстрапе, а бутстраповские колонки в обычные дивы нельзя запихнуть, как поступить?

[Максим]

Jacksnow: не использовать бутстрап

Answer 3

[Евгений]

<div class="section-1"> //черный
  <div class="container">
    <div class="row"><div class="col-md-12">111</div></div>
  </div>
</div>
<div class="section-2"> //белый
  <div class="container">
    <div class="row"><div class="col-md-12">111</div></div>
  </div>
</div>
<div class="section-3"> //черный
  <div class="container">
    <div class="row"><div class="col-md-12">111</div></div>
  </div>
</div>