---
title: Sidebar utilities
slug: sidebar/utilities
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
{{ title }}
You can modify the style of various sidebar elements by using the following sidebar 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 |
Default value |
$sidebar-spacing |
Defines the sidebar spacing |
$sidebar-font-size * 1.25 |
$sidebar-spacing-x |
Defines the sidebar horizontal spacing |
$sidebar-spacing |
$sidebar-spacing-y |
Defines the sidebar vertical spacing |
$sidebar-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 |
Default value |
$sidebar-dark-border-color |
Defines the default border color for sidebar elements when using the .sidebar-dark skin |
rgba(0, 0, 0, .15) |
$sidebar-light-border-color |
Defines the default border color for sidebar elements when using the .sidebar-light skin |
#e5e5e5 |
{% endblock %}