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 =
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 =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example: The following example shows a text container.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
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 =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example: The following example shows the fluid type of container.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
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 =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example: The following example shows aligned container.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
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 =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ body >
</ html >
|
Output: