Semantic-UI | Container

21 Jun, 2020
Semantic UI open-source framework provides a container which helps to limit content up to greatest width. The framework uses jQuery and CSS to create interactive user interfaces. It is very much similar to bootstrap usage and has different elements for creating page structure of any website.
Example: The following example shows the standard container.
<!DOCTYPE html><html>  <head>    <title>Semantic UI</title>    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"     rel="stylesheet" /></head>  <body>    <div style="margin-top: 100px"         class="ui container">                  <h2>Container</h2>        <div class="ui container">            <p>                Semantic UI is an open-source                 framework that uses CSS and                 jQuery to build great user                 interfaces. It is same as a                 bootstrap for use and has                 great different elements to                use to make your website look                more amazing. It uses a class                to add CSS to the elements.            </p>        </div>    </div>          <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="         crossorigin="anonymous">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </script></body>  </html>
Output:
Example: The following example shows a text container.
<!DOCTYPE html><html>  <head>    <title>Semantic UI</title>    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head>  <body>    <div style="margin-top: 100px"         class="ui container">                  <h2>Text Container</h2>        <div class="ui text container">            <p>                Semantic UI is an open-source                 framework that uses CSS and                 jQuery to build great user                 interfaces. It is same as a                 bootstrap for use and has                 great different elements to                 use to make your website look                more amazing. It uses a class                 to add CSS to the elements.            </p>        </div>    </div>      <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </script></body>  </html>
Output:
Example: The following example shows the fluid type of container.
<!DOCTYPE html><html>  <head>    <title>Semantic UI</title>    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head>  <body>    <div style="margin-top: 100px"         class="ui container">                  <h2>Fluid Container</h2>    </div>      <div class="ui fluid container">        <p>            Semantic UI is an open-source             framework that uses CSS and             jQuery to build great user             interfaces. It is same as a             bootstrap for use and has             great different elements to             use to make your website look             more amazing. It uses a class             to add CSS to the elements.        </p>    </div>      <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </script></body>  </html>
Output:
Example: The following example shows aligned container.
<!DOCTYPE html><html>  <head>    <title>Semantic UI</title>    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head>  <body>    <div style="margin-top: 100px"         class="ui container">        <h2>Container</h2>    </div>      <div class="ui left aligned container">        <h3>Left Aligned</h3>        <p>            Semantic UI is an open-source framework             that uses CSS and jQuery to build great            user interfaces. It is same as a bootstrap            for use and has great different elements             to use to make your website look more             amazing. It uses a class to add CSS            to the elements.        </p>    </div>    <br>    <div class="ui center aligned container">        <h3>Center Aligned</h3>        <p>            Semantic UI is an open-source framework             that uses CSS and jQuery to build great            user interfaces. It is same as a bootstrap            for use and has great different elements             to use to make your website look more             amazing. It uses a class to add CSS            to the elements.        </p>    </div>    <br>    <div class="ui right aligned container">        <h3>Right Aligned</h3>        <p>            Semantic UI is an open-source framework             that uses CSS and jQuery to build great            user interfaces. It is same as a bootstrap            for use and has great different elements             to use to make your website look more             amazing. It uses a class to add CSS            to the elements.        </p>    </div>    <br>    <div class="ui justified container">        <h3>Justified</h3>        <p>            Semantic UI is an open-source framework             that uses CSS and jQuery to build great            user interfaces. It is same as a bootstrap            for use and has great different elements             to use to make your website look more             amazing. It uses a class to add CSS            to the elements.        </p>    </div>    <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </script></body>  </html>
Output:
Semantic-UI
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?