Bootstrap nested row margin top/bottom

Question

I am trying to build an application that has a metro interface. Rows are stacked like columns and the children are tiled.

in bootstrap rows have a margin-left of -15px and the same for the right. I have then added 15px padding to the .row. My columns then have a margin of 15px all around. So, I have to make my margin-top: -15px and the padding-top: 15px on my row (aswell as the bottom). All this should give me exactly 30px between every column and row. The problem is when I nest, it all goes to pot.

My CSS looks like this:

.metro {
  width: 10000px;
}

.metro .row-title {
  position: absolute;
  height: 100px;
  top: -50px;
}

.metro > .row {
  position: relative;
  float: left;
  height: 630px;
  margin-top: -15px;
  margin-right: -15px;
  padding: 15px;
}

.metro > .row .row {
  padding: 0;
}

.metro > .row > .col-md-1 {
  width: 75px;
}

.metro > .row > .col-md-2 {
  width: 150px;
}

.metro > .row > .col-md-3 {
  width: 225px;
}

.metro > .row > .col-md-4 {
  width: 300px;
}

.metro > .row > .col-md-5 {
  width: 375px;
}

.metro > .row > .col-md-6 {
  width: 450px;
}

.metro > .row > .col-md-7 {
  width: 525px;
}

.metro > .row > .col-md-8 {
  width: 600px;
}

.metro > .row > .col-md-9 {
  width: 675px;
}

.metro > .row > .col-md-10 {
  width: 750px;
}

.metro > .row > .col-md-11 {
  width: 825px;
}

.metro > .row > .col-md-12 {
  width: 900px;
}

.flex {
  display: -webkit-box;
  /* Safari */

  display: flex;
  /*> div {
            -webkit-box-flex: 1;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        }*/
}

.flex.flex-wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex.flex-vertical {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.row div[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
}

[class*="col-"] > div:not(.row):not(.alert),
[class*="col-"] > a,
[class*="col-"] > form {
  display: block;
  background-color: #3C60EF;
  padding: 10px;
  height: 100%;
}

[class*="col-"] > div:not(.row):not(.alert) .form-group:last-child,
[class*="col-"] > a .form-group:last-child,
[class*="col-"] > form .form-group:last-child {
  margin-bottom: 0;
}

and the HTML that is messing up is this:

<div class="container metro">

  <div class="row">
    <div class="col-xs-12 row-title">
      <h1>Login</h1>
    </div>

    <div class="col-md-12">
      <div class="row flex flex-vertical">
        <div class="col-md-12">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
              <div class="box-shadow">
                <p>
                  Some welcome text
                </p>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div>
                    <p>Nesting</p>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div>
                        <p>Nesting</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6">
              <div class="box-shadow">
                <p>Disclaimer</p>
              </div>
            </div>
          </div>
        </div>

        <form class="col-md-12" name="loginForm" role="form">
          <div class="box-shadow">
            <div class="form-group">
              <input class="form-control" type="text" id="userName" placeholder="Enter Username" required="" ng-model="controller.user.userName">
            </div>

            <div class="form-group">
              <input class="form-control" type="password" id="password" placeholder="Enter Password" required="" ng-model="controller.user.password">
            </div>

            <div class="form-group">
              <button class="btn btn-primary" type="submit" ng-disabled="loginForm.$invalid" ng-click="controller.loginUser()">Login</button>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <div>
                <p>Another nested row</p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

I have created a codepen where you can see my issue:

http://codepen.io/r3plica/pen/ojNVeX

does anyone know how I can achieve this?

Answer 1

I managed to do this myself

Basically I just started with the default bootstrap and then played around until I got my desired results.

Here is the CSS that I changed:

.metro > .row {
  background-color: red;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}

.metro > .row .row {
  background-color: orange;
}

.metro > .row .row .row {
  background-color: yellow;
}

.row div[class*="col-"] {
  border: 1px dashed black;
}

.row [class*="col-"] > div:not(.row),
.row [class*="col-"] > form,
.row [class*="col-"] > a {
  background-color: blue;
  padding: 15px;
  margin-top: 30px;
}

There was no need to add anything else, this solved all my issues.

Answer 2

If I got your question right, you want to create a metro-style UI. Here's a snippet which could be the base for this. As I mentioned in a comment above, do not use bootstrap rows as columns.

body, html {
  height: 100%;
}
.metro {
  width: 10000px;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.metro .page {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  float: left;
}

.content {
  flex: 1;
}

.content-login  {
  background-color: #f0f0f0;
}

.content-page2 {
  background-color: #e0e0e0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="metro">

  <div class="page">
    <h1>Login</h1>
    <div class="row content content-login">
      Content
    </div>
  </div>

  <div class="page">
    <h1>Page 2</h1>
    <div class="row content content-page2">
      Content
    </div>
  </div>
  
</div>