Margin

Bottom margin only. Opt for these instead of adding margin-bottom to a new class.

.has-xxxl-btm-marg
Margin bottom with $size-xxxl
<ul><li class="has-xxxl-btm-marg margin-demo" style="border:2px solid black;">Example</li><li style="border:2px solid black;">Example</li></ul>
.has-giant-btm-marg
Margin bottom with $size-giant
<ul><li class="has-giant-btm-marg margin-demo" style="border:2px solid black;">Example</li><li style="border:2px solid black;">Example</li></ul>
.has-xxl-btm-marg
Margin bottom with $size-xxl
.has-xl-btm-marg
Margin bottom with $size-xl
.has-l-btm-marg
Margin bottom with $size-l
.has-m-btm-marg
Margin bottom with $size-m
.has-b-btm-marg
Margin bottom with $size-b
.has-s-btm-marg
Margin bottom with $size-s
<ul><li class="has-s-btm-marg margin-demo" style="border:2px solid black;">Example</li><li style="border:2px solid black;">Example</li></ul>
.has-xs-btm-marg
Margin bottom with $size-xs
<ul><li class="has-xs-btm-marg margin-demo" style="border:2px solid black;">Example</li><li style="border:2px solid black;">Example</li></ul>
.has-xxs-btm-marg
Margin bottom with $size-xxs
<ul><li class="has-xxs-btm-marg margin-demo" style="border:2px solid black;">Example</li><li style="border:2px solid black;">Example</li></ul>
.has-xxxs-btm-marg
Margin bottom with $size-xxxs
<ul><li class="has-xxxs-btm-marg margin-demo" style="border:2px solid black;">Example</li><li style="border:2px solid black;">Example</li></ul>
.has-tiny-btm-marg
Margin bottom with $size-tiny