Bootstrap nested row margin top/bottom - css

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>