O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The main part of your blog page

On small viewports, the sidebar is under the main content. On large viewports the side bar floats on the right side of the main content.

On large viewports the main content gets ¾ of the available space, the rest ¼ part is left for the side bar. We can accomplish this by using the col-md-9 and col-md-3 classes in our HTML.

The layout columns are set in the default layout template in the html/layouts/default.html file:

    <div class="main-content container"> 
        <div class="row"> 
          <main class="col-md-9" role="content">            
            {{> body}} 
          </main> 
          <aside class="col-md-3"> 
            {{> sidebar}} 
          </aside> 
        </div> 
    </div>   

Again the col-md-* classes are not required. You can accomplish the same by editing the following SCSS code in the scss/includes/_blog.scss ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required