Semantic UI | Container

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

General Syntax

      
        <div class="ui container"></div>

Try it now

Source Code

          <div class="ui container">
  <h2>Learn Semantic UI Container!</h2>
  <p>Learn semantic ui concept by sudhakarinfotech.com</p>
</div>

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

      
        <element class="ui text container"></element>

Try it now

Source Code

          <div class="ui text container">
  <p>Welcome to sudhakarinfotech.com</p>
</div>

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

      
        <element class="ui fluid container"></element>

Try it now

Source Code

          <div class="ui fluid container">
  <p>This is a fluid container.</p>
</div>

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

      
        <element class="ui left aligned container"></element>

Try it now

Source Code

          <div class="ui left aligned container">
  <p>This is a left aligned text content.</p>
</div>

Try it now

Source Code : Output

This is a left aligned text content.

Text:Center Alignment

General Syntax

      
        <element class="ui center aligned container"></element>

Try it now

Source Code

          <div class="ui center aligned container">
  <p>Center Aligned text.</p>
</div>

Try it now

Source Code : Output

Center Aligned text.

Text: Right Alignment

General Syntax

      
        <element class="ui right aligned container"></element>

Try it now

Source Code

          <div class="ui right aligned container">
  <p>Right Aligned Text.</p>
</div>

Try it now

Source Code : Output

Right Aligned Text.

Text Justify Inside The Container

General Syntax

      
        <element class="ui justified container"></element>

Try it now

Source Code

          <div class="ui justified container">
  <p>Justified Alignment.</p>
</div>

Try it now

Source Code : Output

Justified Alignment.

Semantic UI | Container

Learn Semantic UI Container!

Text Container

Fluid Container

Text Alignment Inside Container

Text:Center Alignment

Text: Right Alignment

Text Justify Inside The Container

Web Tutorials