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

Styling the side bar

The side bar of the blog page is built with a Bootstrap list group and will look like that shown in the following screenshot:

Styling the side bar

You can simply turn a <ul> list into a list group with Bootstrap and the predefined list-group and list-group-item CSS classes. Now you can see the flexibility and re-usability of Bootstrap's CSS classes in practice. With ease we can replace the <ul> element with a <div> element and a list of <a> tags. The HTML code for the side menu in the html/includes/sidebar.html file may look like the following:

<aside> <h2>Archive</h2> <!-- list --> <div class="list-group"> <a href="#" class="list-group-item">Cras ...

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