Top / bottom/ left / right

In VUD we include a range of responsive classes to help you position elements.

Notation

This classes can be applied to all breakpoints, from xs to xxl, or to none.

The classes are named using the format {property}-{size} (eg. .top-24 - top: 2.4rem) and {property}-{breakpoint}-{size} (eg. .right-md-24 - right: 2.4rem for screens larger than 992px) for xs, sm, md, lg, xl, and xxl.

Where {property} is one of:

• top - for class that set top position
• bottom - for class that set bottom position
• left - for class that set left position
• right - for class that set right position

Where {size} is one of:

• 0 - for classes that set the position to 0
• 2 - for classes that set the position to 0.2rem (2px)
• 4 - for classes that set the position to 0.4rem (4px)
• 8 - for classes that set the position to 0.8rem (8px)
• 12 - for classes that set the position to 1.2rem (12px)
• 16 - for classes that set the position to 1.6rem (16px)
• 24 - for classes that set the position to 2.4rem (24px)
• 32 - for classes that set the position to 3.2rem (32px)
• 40 - for classes that set the position to 4rem (40px)
• 48 - for classes that set the position to 4.8rem (48px)
• 64 - for classes that set the position to 6.4rem (64px)
• 96 - for classes that set the position to 9.6rem (96px)
• 128 - for classes that set the position to 12.8rem (128px)
• auto - for classes that set the position to auto

Negative position

You can also use negative values. The syntax for negative positions is nearly the same as the one for the positive, but with the addition of n before the requested size. Here’s an example class: .top-n4 which is top: -0.4rem.

					
Copy to clipboard
<div class="top-12"> ... </div>

Copy to clipboard
<div class="top-n12"> ... </div>


<!-- How this clasess will look in CSS -->

.top-0 {
   top: 0 !important;
}

.right-24 {
   right: 2.4rem !important;
}

.bottom-12 {
   bottom: 1.2rem !important;
}

.left-8 {
   left: 0.8rem !important;
}

.left-lg-4 {
   @media (min-width: $screen-md-min) {
      left: 0.4rem !important;
   }
}

.bottom-n24 {
   bottom: -2.4rem !important;
}