Какая должна быть структура для этого макета?

Question

[Yuriy Vitruk]

Привет, хочу сверстать макет (скрин ниже) с помощью bootstrap, какая должна быть html структура сайта, чтобы поделить экран на две части с фоном на всю ширину, но контент оставался посередине (по сетке бутстрапа)? Или лучше сверстать без бутстрапа, и задать отступы от краев?


В голову пришло только

<section class="main">
		<div class="left-main">
			<div class="container">
				<div class="row">
					123
				</div>
			</div>
		</div>
		<div class="right-main">
			<div class="container">
				<div class="row">
					456
				</div>
			</div>
		</div>
	</section>

.main
	.left-main
		width: 50%
		background: #3591d0
		float: left
	.right-main
		width: 50%
		background: #fff
		float: left

Но не работает :С
Большое спасибо за ответы :)

Comments

[Сергей delphinpro]

.background > .container > .row > .col-xs-6*2

[Сергей delphinpro]

фон задается градиентом в вашем случае

background: linear-gradient(to right, blue, blue 50%, white 50%, white);

Answer 1

[Сергей Горячев]

Кто как адаптивно верстает 50% бэкграунды (слева одна картинка, справа другая)?
Аналогично и тут. Только без after\before картинок)
Бустрап не использую принципиально, поэтому не знаю, как сделать на нем.

Answer 2

[I'm Yoda]

Вот так можете попробовать:

.wrapper{
                width: 100%;
                min-height: 100vh;
                position: relative;
            }
            .wrapper::before{
                content: '';
                display: block;
                background: #3591d0;
                position: absolute;
                height: 100%;
                width: 50%;
                top: 0;
                left: 0;
                bottom: 0;
            }
            .wrapper::after{
                content: '';
                display: block;
                background: #fff;
                position: absolute;
                height: 100%;
                width: 50%;
                top: 0;
                right: 0;
                bottom: 0;
            }

<section class="wrapper">
            <div class="container">
                <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>
        </section>