Skip to content Skip to sidebar Skip to footer

Bootstrap Grid With Html5 Sections And Aside

I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen. Currently my MAIN content is wrapped in col-xl-3, I want the ASIDE to als

Solution 1:

I used "col-sm" but the principle is still the same. It's all about the nesting.

View in full page to see columns.

<html><head><scriptsrc="https://code.jquery.com/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><metacharset="utf-8"><metaname="viewport"content="width=device-width"></head><body><divclass="container"role="main"><divclass="row"><divclass="col-sm-8"><divclass="row"><divclass="col-sm-4">1</div><divclass="col-sm-4">2</div><divclass="col-sm-4">3</div><divclass="col-sm-4">4</div><divclass="col-sm-4">5</div><divclass="col-sm-4">6</div></div></div><divclass="col-sm-4"><divclass="row">Nav</div><divclass="row">Nav</div><divclass="row">Nav</div><divclass="row">Nav</div><divclass="row">Nav</div></div></div></div></body></html>

Post a Comment for "Bootstrap Grid With Html5 Sections And Aside"