Bootstrap Layout center container - html

Question

I am new to bootstrap and am trying to create the following layout without success.
<div class="container-fluid">
<!-- Logo row -->
<div class="row">
<div class="col-sm-12">
<div class="header">
<img id="logoImage" src="#" height="67px">
</div>
</div>
</div>
<!-- QRCODE row-->
<div class="row gradient qrCodeRow ">
<div class="row" style="height: 100px;"></div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="qrCode"><img src="#" height="300px" width="300px"></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="text qrText ">
<p class="bigText"><strong>text</strong> text</p>
<p>text</p>
<p>text</p>
</div>
</div>
</div>
</div>
and css:
.container-fluid {
padding: 0;
margin: 0;
}
.v-center {
position: relative;
transform: translateY(50%);
}
.gradient {
background: #1a5062; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#1a5062, #0d2933); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1a5062, #0d2933); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1a5062, #0d2933); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1a5062, #0d2933); /* Standard syntax */
}
.text {
color: #ffffff;
font-family: sans-serif;
}
/* header */
.header {
height: 121px;
padding: 0px 36px 0px 36px;
display: flex;
align-items: center;
}
/* qrcode */
.qrCodeRow {
min-height:502px;
}
.qrCode {
float: right;
}
.qrCode img {
height: 300px;
width: 300px;;
}
.qrText {
height: 300px;
padding-left: 45px;
font-size: 24pt;
font-family: "DIN Neuzeit Grotesk Std Light";
}
I can not figure out how to make the middle part stay 1200px all the time until it has to resize. And I haven't even started thinking of how to make M1 go on top of M2.

Answer 1

I believe this is what you are looking for. First I created a header that is empty and fullwidth. Next I created the main element with the container (of 1200px) in it. The container has a negative margin-top to pull it up. Inside this container you can find the 2 columns. Adding col-xs-12 will make the column 100% width on xs-devices (extra small devices eq phones) and col-md-4 will make this column only 4/12th width of the container on medium devices (desktop) adding these 2 classes together with some offset for the columns makes it responsive. Below you can see the code created in this bootply: http://www.bootply.com/04pBMcDCSu
<div class="wrapper" style="background-color: red;">
<header style="height: 300px; background-color: white;">
</header>
<main>
<!-- (1) -->
<div class="container" style="margin-top: -100px; background-color: yellow;">
<div class="row">
<div class="col-xs-12 col-md-4 col-md-offset-1" style="background-color: blue; height: 300px;">
<h1>M1</h2>
</div>
<div class="col-xs-12 col-md-4 col-md-offset-2" style="background-color: green; height: 300px;">
<h1>M2</h2>
</div>
</div>
</div>
<!-- (2) -->
</main>
</div>