Open In App

Bulma File Alignment

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is an open-source CSS framework that ships with pre-styled components which makes making beautiful and responsive websites easier and faster. 

In this article, we will be seeing alignment options with the Bulma file element. By default, the Bulma file element is left-aligned.

Bulma File Alignment Classes:

  • is-centered: This class is used to make the file element align to the center.
  • is-right: This class is used to make the file element align to the right.

Syntax:

<div class="file File-Alignment Class">
    .....
</div>

Example: The below example illustrates how to use the is-centered and is-right classes to align the file element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<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 rel='stylesheet' 
          href=
    <link rel="stylesheet" 
          href=
  
    <title>Bulma File Alignment</title>
  
    <style>
        h1,
        p {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1 class="is-size-2 has-text-success">
          GeeksforGeeks
        </h1>
        <p><b>Bulma File Alignment</b></p>
  
  
        <div class="file is-boxed">
            <label class="file-label">
                <input class="file-input" 
                       type="file" 
                       name="resume">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Default Alignment
                    </span>
                </span>
            </label>
        </div>
  
        <div class="file is-boxed is-centered">
            <label class="file-label">
                <input class="file-input" 
                       type="file" 
                       name="resume">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Center Alignment
                    </span>
                </span>
            </label>
        </div>
  
        <div class="file is-boxed is-right">
            <label class="file-label">
                <input class="file-input" 
                       type="file" 
                       name="resume">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Right Alignment
                    </span>
                </span>
            </label>
        </div>
  
    </div>
</body>
  
</html>


Output:

Bulma File Alignment

Bulma File Alignment

Reference: https://bulma.io/documentation/form/file/#alignment 



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