Utilities

Please visit the official Bootstrap documentation for a full list of utilities. Additionally, the following utilities have been added:

Backgrounds Dashkit Only

  • .bg-fixed-bottom to fix the background image at the bottom of the .main container at the feed.html page.
  • .bg-cover to set the background-image size of an element to cover.
  • .bg-vibrant to apply a background image with a vibrant gradient for the sidebar.
  • .bg-lighter to set the backgroud color to the value of the $lighter SCSS variable. 
<div class="bg-fixed-bottom" style="background-image: url(assets/img/illustrations/sticky.svg);">...</div>

<div class="bg-cover" style="background-image: url(...);">...</div>

<nav class="navbar navbar-vertical fixed-start navbar-expand-md navbar-dark bg-vibrant">...</div>
  
<div class="bg-lighter">...</div>

Sizing Dashkit only

  • .vw-100 to change the width of an element to 100vw.
  • .vh-100 to change the height of an element to 100vh. 
<div class="vw-100 vh-100">...</div>

Borders Dashkit only

  • .border-2(3, 4, 5), .border-top-2(3, 4, 5), .border-end-2(3, 4, 5), .border-bottom-2(3, 4, 5), .border-start-2(3, 4, 5) to increase the width of a border. 
<div class="border border-2 border-white">...</div>

Lift Dashkit only

  • .lift(-lg) to visually lift an element on hover and focus. 
<a class="btn btn-white lift">
  Hover to lift
</a>

<a class="btn btn-white lift lift-lg">
  Hover to lift
</a>

Type Dashkit only

  • .text-decoration-underline to set the text decoration property to underline. 
<a class="text-decoration-underline" href="#!">...</a>