Semantic UI Container

Semantic UI Container

Semantic Ui container can be created by adding .ui & .container class to the standard container base class.

General Syntax

Source Code

Try it now

Source Code : Output

Learn Semantic UI Container!

Learn semantic ui concept by sudhakarinfotech.com

Text Container

To create a text container, add the ui text container class to the text container base class.

General Syntax

Source Code

Try it now

Source Code : Output

Welcome to sudhakarinfotech.com

Fluid Container

The fluid container covers all the available widths. It will be created by adding a fluid container class to the container base class..

General Syntax

Source Code

Try it now

Source Code : Output

This is a fluid container.

Text Alignment Inside Container

There are the following predefined classes that are used to align text inside the container.

  • left aligned- It is used to align text on the left side of the container.
  • right aligned- It is used to align text on the right side of the container.
  • center aligned- It is used to align text in the center of the container.
  • justified- This adds the justified alignment.

General Syntax

Source Code

Try it now

Source Code : Output

This is a left aligned text content.

Text:Center Alignment

General Syntax

Source Code

Try it now

Source Code : Output

Center Aligned text.

Text: Right Alignment

General Syntax

Source Code

Try it now

Source Code : Output

Right Aligned Text.

Text Justify Inside The Container

General Syntax

Source Code

Try it now

Source Code : Output

Justified Alignment.