December 19, 2017

Semantic UI Container

Semantic UI Container– Container is basically an element which contains all elements of page. Containers are responsive and designed to adjust on all screens. Here in this tutorial, we are going to explain how to

Semantic UI Container Tutorial

Class container along with class ui is used to create standard container in Semantic UI.

Example:

<div class="ui container">
  <h2>Learn Semantic UI!</h2>
  <p>Learn step by step only on www.tutorialsplane.com</p>
</div>

Try it »

Ouput of above example-

Text Container

Class ui text container is used to create text container.

Example:

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

Try it »

Ouput of above example-

Fluid Container

Fluid container have no maximum width limit. Class ui fluid container is used to create fluid container in semantic ui.

Example:

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

Try it »

Text Align

You can use following alignment classes to align the text in container.

left– This class is used to left align the text.
right– This class is used to right align the text.
center– This class is used to align center the text.
justified– This adds the justified alignment.

Example:

<div class="ui left aligned container">
  <p>Left Align</p>
</div>
<div class="ui center aligned container">
  <p>Center Align..</p>
</div>
<div class="ui right aligned container">
  <p>Right Align.</p>
</div>
<div class="ui justified container">
  <p>Justified Alignment.</p>
</div>

Try it »

Ouput of above example-