Container
A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful with other UI elements like grid, to restrict it's width to a reasonable size for display.
Container shortcode arguments
| Classes |
|
Text container
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis. Cras egestas, ex at porta posuere, libero dolor lobortis odio, a eleifend sem arcu vitae diam. Nam eget odio eget odio convallis pellentesque sit amet suscipit lectus. Morbi fringilla, turpis non blandit viverra, ex diam commodo purus, eu rhoncus mauris arcu id ipsum. Proin eget sem gravida, scelerisque diam eu, aliquam neque. Nam vitae sapien quis elit ornare vestibulum vitae at lorem. Nulla consequat ante ac mauris sollicitudin, sit amet tristique nisl lacinia. Pellentesque scelerisque nec urna sit amet ultricies.
<container text>...</container>Notes
A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text.Container variations
Left aligned container
Center aligned container
Right aligned container
Justified 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 left aligned text>Left aligned container</container>
<divider>
<container center aligned text>Center aligned container</container>
<divider>
<container right aligned text>Right aligned container</container>
<divider>
<container justified text>...</container>More about containers: semantic-ui.com/elements/container.html