Semantic-UI Popup Fluid Variation

Last Updated : 23 Feb, 2022

Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive.

Semantic UI Popup is used to display additional information through popups to the user. It alerts and provides the user with necessary information. Popups can help to save space and only show information when the user interacts with the webpage.

Semantic UI Popup fluid variation enables the popup to take the entire area of the offset container. The data itself gets adapted to the space available and space accordingly.

Semantic UI Popup Fluid Variation classes:

fluid: This class is used to add the popup element and it will take up its container width.

Syntax: Add the fluid class to the popup as follows:

<div class="ui fluid popup">
    ...
</div>

Example: In the following example, we have a popup element with some data that will fit itself inside the fluid popup.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    <script src= 
        "https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  
    <style> 
        .icon { 
            margin: 16px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <strong>Semantic UI Popup Fluid Variation</strong> 
        </center> 
  
        <div class="ui segment"> 
            <h1>Welcome to GeeksforGeeks</h1> 
              
<p>Find the best programming tutorials here.</p> 
  
            <center> 
                <div class="ui button">Show fluid popup</div> 
                <div class="ui fluid popup"> 
                    <div class="ui four column divided  
                        center aligned grid"> 
                        <div class="column">Data Structure</div> 
                        <div class="column">Algorithms</div> 
                        <div class="column">Web Development</div> 
                    </div> 
                </div> 
            </center> 
        </div> 
    </div> 
    <script> 
        $('.button').popup({}) 
    </script> 
</body> 
  
</html>