A standard container

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

> Container:
> "Lorem Ipsum Dolor"

Text Container

A container can reduce its maximum width to more naturally accomodate a single column of text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

> Text Container:
> # Header
> "Lorem Ipsum Dolor"

Text Alignment

A container can specify its text alignment

Left Aligned

Center Aligned

Right Aligned

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

> Left Aligned Container:
> "Left Aligned"



> Center Aligned Container:
> "Center Aligned"



> Right Aligned Container:
> "Right Aligned"



> Justified Aligned Container:
> "Justified Aligned"

A fluid container has no maximum width

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

> Fluid Container:
> "Lorem Ipsum Dolor"

A container can be combined with a grid allowing you to use all of the layout and alignment available for grids including responsive patterns.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.

> Four Column Doubling Grid Container:
> > Column:
> > "Lorem ipsum dolor"
> > "Lorem ipsum dolor"
>
> 
> > Column:
> > "Lorem ipsum dolor"
> > "Lorem ipsum dolor"
>
> 
> > Column:
> > "Lorem ipsum dolor"
> > "Lorem ipsum dolor"
>
> 
> > Column:
> > "Lorem ipsum dolor"
> > "Lorem ipsum dolor"

A container can be used inside of a menu to make sure menu items appear inline with page contents. Using responsive variations like stackable menu can help make contents adjust to different device sizes.

Home Browse Messages

> Attached Stackable Menu:
> > Container:
> > [_Home Icon_ Home]()
> > [_Grid Layout Icon_ Browse]()
> > [_Mail Icon_ Messages]()
> >
> > 
> > > Simple Dropdown Item:
> > > More
> > > _Dropdown Icon_
> > >
> > > 
> > > > Menu:
> > > > [_Edit Icon_ Edit Profile]()
> > > > [_Globe Icon_ Choose Language]()
> > > > [_Settings Icon_ Account Settings]()
> >
> > 
> > > Right Item:
> > > <div class="ui input"><input type="text" placeholder="Search..."></div>

A container can be used with a segment

Lorem Ipsum Dolor

> Raised Very Padded Text Container Segment:
> ## Header
> "Lorem Ipsum Dolor"

Container

Types

Standard Container

Markdown Syntax

Text Container

Header

Markdown Syntax

Variations

Text Alignment

Justified Aligned

Markdown Syntax

Fluid

Markdown Syntax

Examples

Container Using Grids

Markdown Syntax

Centered Menu

Markdown Syntax

Container Segment

Header

Markdown Syntax

Help Preserve This Project