Skip to content

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"



Sign Up

Title bottom arrow


Feature Rich

Fully Optimized

Free Support

Free Upgrades

99.9% Uptime

Diagonal Dividers


Beach 2018


Latest Trends

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page