Top / bottom/ left / right

In Nordic Cool 4 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.

				
.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;
}