Menu
Divider
UI Docs
Globals
Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Card Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Modal Popup Progress Search Shape Sidebar Sticky Tab Transition

Divider

Divider

Types
DividerVertical DividerHorizontal Divider
Variations
InvertedFittedHiddenSectionClearing

Types

Divider

A standard divider

To add a divider between parts of a grid use a divided grid variation.

Vertical Divider

A divider can segment content vertically

Vertical dividers requires position: relative on the element that you would like to contain the divider
Due to a change in W3C implementation of absolutely positioned elements in flex containers vertical dividers now currently only support 50/50 splits automatically, and only if not positioned as direct children of flex containers (like grid).
and
A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid
Login
Sign Up
Or

Horizontal Divider

A divider can segment content horizontally

Horizontal dividers can also be used in combination with headers and icons to create different styles of dividers.
Dividers will automatically vary the size of their dividing rules to match the length of your text
Search
Or
Create New Order

Description

Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.

Specifications

Size 1" x 2"
Weight 6 ounces
Color Yellowish
Odor Not Much Usually

Variations

Inverted

A divider can have its colors inverted

Horizontal

Fitted

A divider can be fitted, without any space above or below it.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Hidden

A hidden divider divides content without creating a dividing line

Section One

Section Two

Section

A divider can provide greater margins to divide sections of content

Section One

Section Two

Clearing

A divider can clear the contents above it

Floated Content

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header