mp3por mp3por - 1 month ago 6
CSS Question

Bootstrap Layout center container

I am new to bootstrap and am trying to create the following layout without success.

enter image description here

<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

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>