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 positionbottom
- for class that set bottom positionleft
- for class that set left positionright
- for class that set right position
Where {size}
is one of:
0
- for classes that set the position to 02
- for classes that set the position to 0.2rem (2px)4
- for classes that set the position to 0.4rem (4px)6
- for classes that set the position to 0.6rem (6px)8
- for classes that set the position to 0.8rem (8px)10
- for classes that set the position to 1rem (10px)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
.
<div class="top-12"> ... </div>
<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;
}