Semantic-UI Dimmer Vertical Alignment Variation

Last Updated : 14 Mar, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Dimmer is used to hiding the distractions or site content and move focus to the main content. It can be used to view important updates or notifications.

Semantic UI Dimmer Vertical Alignment Variation is used to align the content of the dimmer either to the top or bottom of the dimmer.

Semantic UI Dimmer Vertical Alignment Variation Classes:

top aligned: This makes the content of the dimmer top aligned.
bottom aligned: This makes the content of the dimmer bottom aligned.

Syntax: Add the desired alignment to the dimmer container as follows:

<div class="ui top aligned dimmer">
    ...
</div>

Example: In the following example, we have two buttons to change the alignment of the dimmer content.

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> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong> 
                Semantic UI Dimmer Vertical Alignment Variation 
            </strong> 
        </center> 
  
        <div class="ui segment" id="gfgdimmer"> 
            <div class="ui top aligned dimmer" id="dimmer"> 
                <div class="content"> 
                    <h3>Welcome to GeeksforGeeks</h3> 
                    <br /> 
                    <button class="ui red button" 
                        onclick="hideDimmer()">Hide</button> 
                </div> 
            </div> 
            <div class="content"> 
                <h1>Welcome to GeeksforGeeks</h1> 
  
                <p>Find the best programming tutorials here.</p> 
  
                <button class="ui green button" 
                    onclick="showDimmer()">Show</button> 
                <br /> 
                <br /> 
                <button class="ui button" 
                    onclick="changeAlignment('top')"> 
                    Top 
                </button> 
                <button class="ui button" 
                    onclick="changeAlignment('bottom')"> 
                    Bottom 
                </button> 
            </div> 
        </div> 
    </div> 
    <script> 
        const showDimmer = () => { 
            $('#gfgdimmer').dimmer('show') 
        } 
        const hideDimmer = () => { 
            $('#gfgdimmer').dimmer('hide') 
        } 
        const changeAlignment = (alignment) => { 
            $('#dimmer').removeClass('top aligned') 
                .removeClass('bottom aligned') 
            $('#dimmer').addClass(alignment + ' aligned') 
        } 
    </script> 
</body> 
  
</html> 