Semantic UI Header– Header is basically used to represent the short summary of the content. There are various types of headers available in Semantic UI Framework- Such as Page Headers, Content Headers, Icon Headers and Sub Headers. Here in this tutorial, we are going to explain the headers one by one. You can use our online editor to edit and run the code online.

Semantic UI Header Tutorial

Let us go one by one to understand the Headers available in semantic UI.

1. Types
2. Content
3. States
4. Variations

Types

Following types of headers are available-

• 1. Page Headers
• 2. Content Headers
• 3. Icon Headers
• 4. Sub Headers

Page Headers

To create page header add class ui header to heading(h1, h2, h3, h4, h5, h6) element. –

My header 1
My header 2
My header 3

If you run the above example it will produce the output something like this-

Content Headers

You can add header in content container using predefined classes. There are various size classes available such as – huge, large, medium which can be used to create different size of headers.

 

  
Huge Header
  
This Dummy Paragraph...
  
Large Header
  
This Dummy Paragraph...
  
Medium Header
  
This Dummy Paragraph...
  
Small Header
  
This Dummy Paragraph...
  
Tiny Header
  
This Dummy Paragraph...

Output of above example-

In the above output you can see the different size of content header, to change the size of header you just need to add the size modifier class to heading element.

Icon Headers

We can create icon headers using the icon class along with header class.

  
  

	Manage Profile
	
Manage your profile settings here.
  

To add icon in header first add class icon to header, then add icon using semantic icons. In the above example we have added users icon using class users icon”>.

Output of above example-

Sub Headers

Class sub is used to create sub header.

   Discount

$19.99

Add class sub to heading along with class ui header then add span to add the label text.

Output of above example-

Content

You can create following content headers.

• 1. Image
• 2. Icon
• 3. Subheader

Image

You can add image to header using image class image.

  
  

	Welcome to Tutorialsplane.com!
  

Output of above example-

Icon

You can add icon to header using icon class simply as below.

  
  

    Like Us!
  

You can get complete icon list from here – Semantic UI Icons List

Output of above example-

Subheader

You can add subheader of any header. Add class sub to the child header.

  Profile Settings
  
Go profile settings for more options to manage your Account.

In the above example we have added class sub along with class header. On the same way you can add other subheader.

If you run the above example it will generate output something like this-

States

Following State is available for headers-

• Disabled Header– Add class disabled to create disabled header.

  Dsiabled Header
  
Go profile settings for more options to manage your Account.

Output of above example-

Learn More

Don’t Stop, Keep Learning!

Variations

Following variations are available for headers.

• 1. Dividing
• 2. Block
• 3. Attached
• 4. Floating
• 5. Text Alignment
• 6. Colored
• 7. Inverted

Dividing

You can add divider to the bottom of header using class dividing. Here is an example of header divider.

  Header With Divider 

Adding class dividing to heading will add divider below to the header.

Output of above example-

Block

You can add class block to make block level header.

  Block Header

After adding class block it will add a light border of 1px with padding. Block headers can also be used to display messages like- Notice, Warning, Error or Success.

Output of above example-

Attached

Like segment headers can also be attached to content.

  Top Attached Header


  
This is dummy text...


  Attached Header


  
This is dummy text...


  Bottom Attached Header

Add class top attached to create top attached header. Add class bottom attached to create bottom attached header. Add class attached to create simple attached header.

If you run the above example it will produce output something like this-

Floating

You can use floating class left floated or right floated to make it float left or right.

  

    Next
  
  

    Previous
  

Output of above example will look something like this-

Text Alignment

You can use text alignment classes to make header text left aligned, center aligned or right aligned or justified.

Right Aligned Text.


Center Aligned Text.


Left Aligned Text.


Justified Text.
				  

Output of above example-

Colored

You can use color classes to change the header text color. You just need to add the color class to header. Here is an example of colored header text.

Blue Header
Yellow Header

On the same way you can change the text color of header. If you want to add custom color add custom color class to header.

Output of above example-

Inverted Color

If you want inverted color add class inverted to header.

  
Orange
  
  
Red
  
Yellow

If you run the above example it will produce output something like this-

Semantic UI divider– A divider is basically used to separate the content into different-different parts.

Semantic UI divider Example

Class ui divider is used to create standard divider.

Hello World!

Ouput of above example-

Vertical Divider

Class ui vertical divider is used to create vertical dividers.

  

    
Column 1
    
Text goes here....
  
  

    v-bar
  
  

    
Column 2
    
Text goes here....
  
  

    v-bar
  
  

     
Column 3
    
Text goes here....
  

Horizontal Divider

Class ui horizontal divider is used to create horizontal divider in semantic ui.

Already Registered?
If you are already registered please login.

    Or

Register
If you are not registered please please register now.

Ouput of above example-

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.

  
Learn Semantic UI!
  
Learn step by step only on www.tutorialsplane.com

Ouput of above example-

Text Container

Class ui text container is used to create text container.

  
Welcome to tutorialsplane.com!

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.

  
This is fuild container.

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.

  
Left Align


  
Center Align..


  
Right Align.


  
Justified Alignment.

Ouput of above example-

Semantic UI Buttons– Class ui button is used to create buttons in semantic ui framework. There are different types of buttons available in Semantic UI. Here in this article we are going to explain how you can create Beautiful buttons in Semantic UI framework. You can also use our online editor to edit and run the code online.

Semantic UI Buttons Tutorial

Let us create first simple button, Add class ui button to button element-

  Button

If you run the above example it will produce output something like this-

Following types of buttons are available in semantic UI.

Basic Button

To create basic button add class basic to button.

  Basic Button

Output of above example-

You can change the style of basic button to any of the following-

• 1. Primary Button
• 2. Secondary Button
• 3. Positive Button(Success)
• 4. Negative Button(Warning)

Example

Primary Button
Secondary Button 
Positive Button
Negative Button

Ouput of above example-

Change Basic Button Color

If you want to change the color of basic button you can apply color class simply as below-

Red Button
Yellow Button
Orange Button
Green Button
Olive Button
Purple Button
Teal Button
Blue Button
Violet Button
Brown Button
Pink Button
Grey Button
Black Button 

Ouput of above example-

Standard Button

To create standard button add class ui button.

• 1. Primary Button
• 2. Secondary Button
• 3. Positive Button(Success)
• 4. Negative Button(Warning)

Here is an example of standard buttons.

Primary Button
Secondary Button 
Positive Button
Negative Button

Ouput of above example-

Change Standard Button Color

You can change standard button color using color class simply as below-

Violet
Pink
Yellow
Red
Orange
Olive
Green
Teal
Blue
Purple
Brown
Grey
Black

Ouput of above example-

Inverted Button

To create inverted buttons first create div wrapper with class – ui inverted segment and then add button with inverted class. Here is an example of inverted Button.

  Standard Button
  Yellow Button
  Orange Button

Ouput of above example-

Add Icon to Button

You can create button with icon using icon and label class.

  
  Add As Friend

Ouput of above example-

Button Groups

You can create button groups simply as below-

  Button 1
  Button 2
  Button 3

Ouput of above example-

Semantic UI Installation– You can easily install Semantic UI either locally or you can use hosted CDN Url to use Semantic UI framework. Here in this tutorial, we are going to explain how to install Semantic UI.

Semantic UI Installation Steps | CDN URL | Download Locally

There are following ways to install Semantic UI Framework –

Using Hosted CDN

You can use hosted CDN to install the UIkit css. You can include the UIkit JS and CSS from CDN url simply as below-

Install Locally

You can download the CSS and JS from Download Semantic UI and include the CSS and JS files.

Semantic UI Tutorial – Semantic UI is modern CSSframework which enables us to create beautiful web pages with ready made classes. It has more ready made components than other CSS framework.

Semantic UI Tutorial Step By Step

Semantic UI is basically framework which enables us to create beautiful web pages using simple & friendly HTML.

• Responsive– It is developed with the mobile-first approach. It is fully responsive across all devices.
• Customization– It is very simple to customize the Semantic UI theme.
• Components– It provides rich ready made beautiful components with smooth transition.
• Compatible With React, Angular, Meteor, Ember & Other– It is compatible with modern frameworks like- React, Angular, Metor etc.
• Open Source– It is open source which you can use free of cost.

---

Audience

---

This tutorial is designed for the professionals to help them in learning the basic concept of Semantic UI CSS.

What You Should Know?

Before starting to Learn Semantic UI you should be aware of basic concept of HTML, CSS and JavaScript.