---
title: Sidebar utilities
slug: sidebar/utilities
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
{{ title }}
You can alter the style of various sidebar elements by using the built-in CSS helper classes.
Sidebar spacing
Padding
Add any of the following CSS classes to any element within the .sidebar
container to apply a vertical or horizontal padding.
CSS Class |
Description |
.sidebar-p-a |
Apply padding in all directions using the sidebar horizontal and vertical spacings |
.sidebar-p-x |
Apply horizontal padding to any element using the sidebar horizontal spacing |
.sidebar-p-y |
Apply vertical padding to any element using the sidebar vertical spacing |
.sidebar-p-l |
Apply left padding to any element using the sidebar horizontal spacing |
.sidebar-p-r |
Apply right padding to any element using the sidebar horizontal spacing |
.sidebar-p-t |
Apply top padding to any element using the sidebar vertical spacing |
.sidebar-p-b |
Apply bottom padding to any element using the sidebar vertical spacing |
Margin
Add any of the following CSS classes to any element within the .sidebar
container to apply a vertical or horizontal margin.
CSS Class |
Description |
.sidebar-m-a |
Apply margin in all directions using the sidebar horizontal and vertical spacings |
.sidebar-m-x |
Apply horizontal margin to any element using the sidebar horizontal spacing |
.sidebar-m-y |
Apply vertical margin to any element using the sidebar vertical spacing |
.sidebar-m-l |
Apply left margin to any element using the sidebar horizontal spacing |
.sidebar-m-r |
Apply right margin to any element using the sidebar horizontal spacing |
.sidebar-m-t |
Apply top margin to any element using the sidebar vertical spacing |
.sidebar-m-b |
Apply bottom margin to any element using the sidebar vertical spacing |
The sidebar spacings can be customized with Sass variables.
Sass variable |
Description |
$sidebar-spacing-x |
Defines the sidebar horizontal spacing |
$sidebar-spacing-y |
Defines the sidebar vertical spacing |
Sidebar border
Add any of the following CSS classes to any element within the .sidebar
container to apply a 1px solid
border to any sidebar element using the border color defined by the .sidebar-light
or .sidebar-dark
skins.
CSS Class |
Description |
.sidebar-b-a |
Apply border in all directions using the border color defined by the sidebar skin |
.sidebar-b-x |
Apply horizontal borders to any element using the border color defined by the sidebar skin |
.sidebar-b-y |
Apply vertical borders to any element using the border color defined by the sidebar skin |
.sidebar-b-t |
Apply top border to any element using the border color defined by the sidebar skin |
.sidebar-b-b |
Apply bottom border to any element using the border color defined by the sidebar skin |
The border color can be customized with Sass variables.
Sass variable |
Description |
$sidebar-light-border-color |
Defines the border color for generic sidebar elements when using the .sidebar-light skin |
$sidebar-dark-border-color |
Defines the border color for generic sidebar elements when using the .sidebar-dark skin |
{% endblock %}