Styling the options sidebar

Now, let's style our filtering options. These appear just before the markup for our product items. In small, medium, and large viewports, they appear as a left-hand sidebar.

At the moment, they appear like the following screenshot:

For our final design, we want to transform the Clearance Sale link into an attractive extra-large button and arrange the filtering options into two columns with checkboxes rather than bullets, as shown in the following screenshot:

Let's begin by setting up some basic styles to lay a basic groundwork.

Setting up basic styles

We'll start by adjusting fonts, colors, margins, and padding.

Let's add these rules to _prod ucts-grid.less:

.grid-options {
  .panel;
  .panel-default;
  padding-top: 12px;
  padding-bottom: 24px;
  > h2 {
    margin-top: 0;
    font-size: 1.5 * (@font-size-large);
    line-height: 1.2;
    color: @gray-dark;  
  }
}

The preceding code does the following:

• Adds Bootstrap default panel styles to our sidebar (see the relevant...