--- 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 %}