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:

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 justo odio</a> 
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
    <a href="#" class="list-group-item">Morbi leo risus</a> 
    <a href="#" class="list-group-item">Porta ac consectetur...