Bootstrap 4 Alpha 6 Column Taking Up Full Width

I just upgraded one of my electron apps to Bootstrap's new Alpha 6 for Bootstrap 4. They made lots of adjustments to the grid system and flexbox and in turn that has given me some

Solution 1:

.row's, compensate for the guttering that gets applied to columns. From Docs

Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.

Try the following:

JSFIDDLE

HTML

<divclass="row"><divclass="col-4 col-xl-3 no-gutter">
    LEFT
    </div><divclass="col-8 col-xl-9">
     RIGHT
    </div></div>