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