Semantic-UI Image Floated Variations

Last Updated : 28 Feb, 2022

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.

There are different styles of putting images on our website using semantic-ui that make our website look more awesome. Semantic-UI Image Floated Variations are used to place the image to the left or right of other web content.

Semantic UI image floated variation classes:

left floated: It is used to place the image to the left side of the content.
right floated: It is used to place the image to the right side of the content.

Syntax:

<div class="ui segment">
    <img class="ui small left floated image" src="gfg.png">
    <p>Text Content...</p>
</div>

Example 1: In this example, we will use Image Floated Variations to float the image on the left and right sides.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Image Floated Variations 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui center aligned container"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Image Floated Variations</h3> 
  
        <img class="ui left floated image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <br> 
        <img class="ui circular right floated image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use Image Floated Variations with text content to float the image on the left and right sides.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Image Floated Variations 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
</head> 
  
<body> 
    <div class="ui center aligned container"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Image Floated Variations</h3> 
    </div> 
  
    <div class="ui container"> 
        <img class="ui left floated image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <p> 
            Web Technology refers to the various tools and 
            techniques that are utilized in the process of 
            communication between different types of devices 
            over the internet. A web browser is used to 
            access web pages. Web browsers can be defined 
            as programs that display text, data, pictures, 
            animation, and video on the Internet. 
            Hyperlinked resources on the World Wide Web 
            can be accessed using software interfaces 
            provided by Web browsers. 
        </p> 
        <br><br> 
          
        <img class="ui circular right floated image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <p> 
            Web Technology refers to the various tools and 
            techniques that are utilized in the process of 
            communication between different types of devices 
            over the internet. A web browser is used to 
            access web pages. Web browsers can be defined 
            as programs that display text, data, pictures, 
            animation, and video on the Internet. 
            Hyperlinked resources on the World Wide Web 
            can be accessed using software interfaces 
            provided by Web browsers. 
        </p> 
    </div> 
</body> 
  
</html>