Overlaping sections using Bootstrap and CSS
Shortly after the post I found out that also adding a background color to individual block elements and applying padding to both top &amp; bottom will actually stretch out the background-color and allow of the use of margins to cover other elements like so

.grayBG {
    background-color: #f5f6f7;
    padding-top: 100px;
    padding-bottom: 100px;
}


and

.whiteBG {
background-color: #FFF;
padding-top: 150px;


}

then with the use of a -margin I was able to pull sections to overlap each other like so. 

.second-section {
background-color: #FFF;
margin-top: -300px;
padding-bottom: 0;


}

There is probably a better and more efficient way of doing this but, this seemed to work for me just fine.