Detect incorrect nesting in Bootstrap grid layout

by Tony Tubbs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9">Level 1: .col-sm-9
            <div class="row">
                <div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
                <div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
            </div>
        </div>
    </div>
    
    <br /> <hr/><br />
    
    <div class="row">
        <div class="other"><div class="other"><div class="other">
            <div class="col-sm-9">
                <div class="other"><div class="other"><div class="other">
                    Level 1: .col-sm-9
                    <div class="row">
                        <div class="other"><div class="other"><div class="other">
                            <div class="col-xs-8 col-sm-6">
                                <div class="other"><div class="other"><div class="other">
                                    Level 2: .col-xs-8 .col-sm-6
                                </div></div></div>
                            </div>
                            <div class="col-xs-4 col-sm-6">
                                <div class="other"><div class="other"><div class="other">
                                    Level 2: .col-xs-4 .col-sm-6
                                </div></div></div>
                            </div>
                        </div></div></div>
                    </div>
                </div></div></div>
            </div>
        </div></div></div>
    </div>
    
    <br /><hr/><br />
    
    <div class="row">
        <div class="row">This is an error - .row within .row not separated by .col.</div>
    </div>
    
    <br /> <hr/> <br />
    
    <div class="row">
        <div class="other"><div class="other"><div class="other">
            <div class="row">This...

CSS

/* Mark ALL nested rows */
 .row .row {
    border: 2px dashed FireBrick;
    background: LightCoral;
}
/* Mark ALL nested columns */
[class*="col-"] [class*="col-"] {
    border: 2px dotted DarkOrange;
    background: Moccasin;
}
/* Remove markings for correct nesting
 * Either:
 * row - col - row
 * col - row - col
 */
.row [class*="col-"] .row, 
[class*="col-"] .row [class*="col-"] {
    border: inherit;
    background: inherit;
}