Bootstrap 3 Fluid Grid Layout Issues

Bootstrap 3 Fluid Grid Issues

As stated at http://getbootstrap.com/css/:

Content should be placed within columns, and only columns may be immediate children of rows.

Your layout has a row as child from another row. Put another col-12 in between or remove one row.

Boostrap 3 Fluid Grid Layout Issue; Long items cause stacking problems

You can use an manual approach of creating rows according with the number of elements per breaking point. For example:

If you have a row with 2 elements only:

@media(max-width: @screen-tablet){
    // create rows (clearfix)
    .col-xs-6:nth-of-type(odd){ clear:left; }
}

or if your rows contains 4 elements

@media(min-width: @screen-tablet) and (max-width: @screen-desktop){
    // create rows (clearfix)
    .col-sm-4:nth-of-type(3n+1){ clear:left; }
}

etc..

Bootstrap 3 Grid Layout Issue on Tablet

The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:

<div class="row visible-lg visible-md">
    <div class="col-md-4">
      <!-- Your Content 1-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 2-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 3-->
    </div>
</div>
<div class="row visible-lg visible-md">
    <div class="col-md-4">
      <!-- Your Content 4-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 5-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 6-->
    </div>
</div>

Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:

<div class="row visible-sm visible-xs">
    <div class="col-sm-6">
      <!-- Your Content 1-->
    </div>
    <div class="col-sm-6">
      <!-- Your Content 2-->
    </div>
</div>
<div class="row visible-sm visible-xs">
    <div class="col-sm-6">
      <!-- Your Content 3-->
    </div>
    <div class="col-sm-6">
      <!-- Your Content 4-->
    </div>
</div>
<div class="row visible-sm visible-xs">
    <div class="col-sm-6">
      <!-- Your Content 5-->
    </div>
    <div class="col-sm-6">
      <!-- Your Content 6-->
    </div>
</div>

This will provide the formatting you desire. Hope this helps.

Grid system issues in Bootstrap 3

I found the problem. The RC logo had some extra padding to it which is why the outer row could not accommodate the 12 columns. I changed the second div of the outer row to col-md-4 instead of the col-md-6 and that solved the problem. "Some content" is showing up on the right side now in wider screens.

Bootstrap 4 grid layout problem migrating from Boostrap 3

With Bootstrap-4, as it's using flex, you need to provide containing columns and rows to define relationship between everything. If you want the ten col-3 sections to be together, then put them into their own col-6 container, and then create a new row to hold the smaller columns (which are now col-6 because they're starting the 12 unites over again).

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <h1>Responsive Bootstrap 4.6.0</h1>
        <div class="row">
            <div class="col-6" style="padding:0px">
                <div style="background-color:green">level 1 - col-6</div>
                <div style="background-color:green">level 2 - col-6</div>
                <div style="background-color:green">level 3 - col-6</div>
                <div style="background-color:green">level 4 - col-6</div>
                <div style="background-color:green">level 5 - col-6</div>
            </div>
            <div class="col-6 p-0">
                <div class="row">
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                </div>
            </div>
        </div>
    </div>

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
</div>