Semantic UI | Container

A semantic UI container is used as a wrapper for the page contents. It placed the page contents at a reasonable maximum width based on the device screen size. It can be created by adding .ui & .container class to the standard container base class.

Container Sizes

Semantic containers are responsive and adjust their maximum width based on the available screen size.

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.

Semantic Ui Text Center

To center text using semantic UI, use the center aligned class. You can apply this class to several elements, such as container, a segment, or a grid column.

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.

Semantic Ui Align Right

To place the text on the right side of the container, use the right aligned class.

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

If you want to justify text contents inside the container, use the justified class.

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.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4