Elements:Dividers
AppStrap offers responsive block divider options to divide up your content blocks, here are the styles and options available.
Diagonal Dividers
Add the class
divider-diagonal
plus an arrow direction class
divider-diagonal-(r)
. r = right, l = left
.divider-diagonal
.divider-diagonal-r
Arrow Dividers
Add the class
divider-arrow
plus an arrow direction class
divider-arrow-(r|l|t|b)
. r = right, l = left, b = bottom & t = top.
.divider-arrow-l
.divider-arrow-r
.divider-arrow-t
.divider-arrow-b
Colour Options
The AppStrap colours can be used on all divider types, colour options are:
.divider-light
.divider-primary
.divider-info
.divider-success
.divider-warning
.divider-danger
.divider-grey
.divider-grey-dark
.divider-dark
.divider-green
.divider-red
.divider-blue
.divider-purple
.divider-pink
.divider-orange
.divider-lime
.divider-blue-dark
.divider-red-dark
.divider-brown
.divider-cyan-dark
.divider-yellow
.divider-slate
.divider-olive
.divider-teal
.divider-green-bright
Opacity
Use the classes
.divider-op-(1-9)
to control the opacity of dividers.
Responsive Dividers
Dividers are also responsive so you can control at which breakpoint they kick in. Classes pattern is:
.divider-(sm|md|lg|xl)
Examples
Left arrow
Newsletter
Get offers & discounts with our monthly newsletter: "No pain, no gain"