Nested layout using bootstrap causes misalignment - html

Question

I am trying to create a nested layout using bootstrap 3. I followed the the tutorial (see the part regarding nesting). The layout basically only contains rows consisting of single columns, however I still need the nesting for technical reasons. My current version is in this fiddle.
In a nutshell, I use alternating row / column divs to achieve the nesting:
<div class="row">
<div class="col">
<div class="row">
<div class="col">
Content row 1 (misaligned)
</div>
</div>
</div>
</div>
The problem is that the inner content is misaligned with respect to the surrounding one. I suspect that this is because rows have a negative margin. Is there a way to fix or circumvent this problem?

Answer 1

There is no .col definition for bootstrap 3.
TWBS-3#css#grid syntax is: .col-${screen}-${span} where:
screen = ['xs', 'sm', 'md', 'lg']
span = [1-12]
So, assuming you want to work with extra small screens your html should look like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
Content row 1 (misaligned)
</div>
</div>
</div>
</div>
</section>
here is the official example using screen = xs
.txt {
background: cyan;
height: 20px;
display: flex;
margin: 3px 0;
align-items: center;
justify-content: center;
}
.row { margin-bottom: 50px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="container">
<div class="row">
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
<div class="col-xs-1"><div class="txt">1</div></div>
</div>
<div class="row">
<div class="col-xs-8"><div class="txt">.col-xs-8</div></div>
<div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
</div>
<div class="row">
<div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
<div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
<div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
</div>
<div class="row">
<div class="col-xs-6"><div class="txt">.col-xs-6</div></div>
<div class="col-xs-6"><div class="txt">.col-xs-6</div></div>
</div>
</section>

Answer 2

there is no class called ".col1" in bootstrap. you need to give proper column class to get rid if the row margin. try to use the blow code
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 "> Content row 1</div>
<div class="col-xs-4 col-sm-4 col-md-4"> Content row 2 </div>
<div class="col-xs-4 col-sm-4 col-md-4"> Content row 3 </div>
</div>