Semantic-UI Button Variations Equal Width Buttons

Last Updated : 08 Feb, 2022

Semantic UI Button Group also offers a group variation of buttons, there are Icon buttons, labeled icon buttons, mixed group buttons, equal width, colored buttons, basics buttons, Group sizes buttons, etc.

In this article, we will discuss the Equal Width. Equal Width can have their widths divided evenly, here we can create a simple button group that will follow a fixed width of each button that will be the same inside of that group.

Semantic-UI Button Variations Equal Width Class:

number*: This is the variable, you can just place the count (in alphabetic) name in the div element to divide the width evenly.

Syntax:

<div class="number*ui buttons">
  <button class="ui button">...</button>
  <button class="ui button">...</button>
    ...
</div>

Example: In this example, we will create two button groups one will contain 2 buttons with an equal width another one will contain 5 buttons each button width will be equal to each other in the groups.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks:</h1>
        <strong>Semantic UI Button Variations Equal Width</strong>
    </center>
    <br><br>
    <strong>Equal Width Buttons:</strong>
    <br>
    <div class="ui three buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
    <br><br>
    <strong>Equal Coloured Width Buttons:</strong>
    <br>
    <div class="ui five green buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
        <button class="ui button">Upload</button>
        <button class="ui button">Download</button>
    </div>
</body>
 
</html>