Open In App

Semantic-UI Input Fluid Variation

Improve
Improve
Like Article
Like
Save
Share
Report

 Semantic UI framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. This framework allows us to use various of its styles and properties to make a website more user-friendly.

The input fluid is used to take the input from the user, this input variation takes the size of the outer container, it will adjust according to the size of the container.

Semantic UI Input Fluid Variation Class:

  • fluid: This class is used to create fluid input.

Syntax:

<div class="ui fluid input">
    <input type="text" .../>
         ...
</div>

Example 1: The following code demonstrates the input fluid using the Semantic UI framework. This input variation takes the size of the outer container, it will adjust according to the size of the container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
  
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <br />
    <h1 class="ui header green">
        GeeksforGeeks
    </h1>
      
    <div class="ui fluid input">
        <input type="text" placeholder="Search here">
        <div class="ui green button">
            Search
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Input Fluid Variation

Semantic-UI Input Fluid Variation

Example 2: The following code demonstrates to create input fluid with an icon instead of a button using the Semantic UI framework. This input variation takes the size of the outer container, it will adjust according to the size of the container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
  
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <h1 class="ui header green">
        GeeksforGeeks
    </h1>
    <div class="ui fluid icon input">
        <input type="text" placeholder="Search here">
        <i class="search icon"></i>
    </div>
</body>
  
</html>


Output:

Semantic-UI Input Fluid Variation

Semantic-UI Input Fluid Variation

Reference: https://semantic-ui.com/elements/input.html#fluid



Last Updated : 25 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads