Skip to content
Related Articles

Related Articles

Semantic-UI Header Floating Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic-UI Header provides a short summary of content and it offers us different variations of the header, like Dividing, Block, Attached, Floating, Text alignment, Colored, and Inverted variants. In this article, we will learn about the Floating variant of the header. This variant is used to float our header to the left or the right of the screen.

Semantic-UI Header Variations Floating Variant Classes:

  • left floated: This class is used to float the header on the left side of the screen.
  • right floated: This class is used to float the header on the right side of the screen.

Syntax:

<element class="ui right floated header">
    ...
</element>

The below example illustrates the Semantic-UI Header Variations Floating Variant:

Example 1: In this example, we will float the header on the right.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
        </h1>
        <strong>
          Semantic UI Header Variations Floating
        </strong>
        <br><br>
    </center>
    <div class="ui clearing segment">
        <strong class="ui right floated header">
            GeeksforGeeks <sub>Right Floated</sub>
        </strong>
        <br><br>
        <p>
            With the idea of imparting programming
            knowledge, Mr. Sandeep Jain, an IIT
            Roorkee alumnus started a dream,
            GeeksforGeeks. Whether programming excites
            you or you feel stifled, wondering how to
            prepare for interview questions or how to
            ace data structures and algorithms,
            GeeksforGeeks is a one-stop solution.
        </p>
  
    </div>
</body>
  
</html>


Output:

Semantic-UI Header Floating Variations

Semantic-UI Header Floating Variations

Example 2: In this example, we will float the header on the left.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
        </h1>
        <strong>
          Semantic UI Header Variations Floating
        </strong>
        <br><br>
    </center>
    <div class="ui clearing segment">
        <strong class="ui left floated header">
            GeeksforGeeks <sub>Right Floated</sub>
        </strong>
        <br><br>
        <p>
            With the idea of imparting programming
            knowledge, Mr. Sandeep Jain, an IIT
            Roorkee alumnus started a dream,
            GeeksforGeeks. Whether programming excites
            you or you feel stifled, wondering how to
            prepare for interview questions or how to
            ace data structures and algorithms,
            GeeksforGeeks is a one-stop solution.
        </p>
  
    </div>
</body>
  
</html>


Output:

Semantic-UI Header Floating Variations

Semantic-UI Header Floating Variations

Reference: https://semantic-ui.com/elements/header.html#floating


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!