Skip to content
Related Articles

Related Articles

Semantic-UI Message Floating Variation

Improve Article
Save Article
  • Last Updated : 15 Mar, 2022
Improve Article
Save Article

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different message type classes that can be used for different purposes to display a message with a good interface. In this article let us see about the messages of floating variation in Semantic UI.

Semantic-UI Message Floating Variation Class:

  • floating: This class creates the floating effect of the message on the content of the screen.

Syntax:

<div class="ui floating message">
 <i class=".... icon"></i>
 <div class="content">
  ...
 </div>
</div>

Example 1: This example describes the message of floating variation.

HTML




<!DOCTYPE html>
<html>
<head>
  <head>Semantic-UI Message Floating Variation</head>
  <link href=
        rel="stylesheet" />
  <script src=
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous">
  </script>
  <script src=
  </script>
</head>
 
<body>
  <center>
    <h1 class="ui green header">GeeksforGeeks</h1>
    <strong>
      Semantic-UI Message Floating Type
    </strong>
  </center>
  <br />
  <br />
  <div class=" ui container">
    <div class="ui floating message">
       
<p>A basic floating message</p>
 
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI Message Floating Variation

Semantic-UI Message Floating Variation

Example 2:This example describes the list message of floating variation.
 

HTML




<!DOCTYPE html>
<html>
 
<head>
  <head>Semantic-UI Message Floating Variation</head>
  <link href=
        rel="stylesheet" />
  <script src=
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous">
  </script>
  <script src=
  </script>
</head>
 
<body>
  <center>
    <h1 class="ui green header">GeeksforGeeks</h1>
    <strong>
      Semantic-UI Message Floating Type
    </strong>
  </center>
  <br />
  <br />
  <div class="ui container">
    <div class="ui floating message">
      <div class="header">
        New Update 2.3.1 available
      </div>
      <ul class="list">
        <li>Enhanced UI with new features</li>
        <li> Auto save work feature added </li>
        <li>Improved the launch performance</li>
      </ul>
    </div>
  </div>
</body>
</html>


Output: 

Semantic-UI Message Floating Variation

Semantic-UI Message Floating Variation

Reference: https://semantic-ui.com/collections/message.html#floating


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!