CSS reference - Bifrost

BottomBar

.bf-bottom-bar

Fixed position bottom of viewport (will float on top of other content)
Responsive vertical padding equal to .bf-page-padding (remove all padding with .bf-bottom-bar-nopadding)
Automatically makes space for sidebar/collapsed sidebar/no sidebar (including transition)
Height will adjust to its content

Main content overlap

Since the BottomBar will float on top of other content, you need to make sure to make vertical space for it at the bottom of your content, usually a padding-bottom: [your BottomBar height] on your main content will do the trick.

.bf-bottom-bar-nopadding

Removes the padding

Combine with .bf-inline

You can use .bf-inline to get inline spacing between items, and .bf-inline-space to add margin-left: auto on an item (pushing it to the right).

Since .bf-inline uses flexbox, you can center its items vertically with align-items: center. See inline css docs for more examples.

Some text