Bulma es un marco CSS de código abierto que se envía con componentes prediseñados que hacen que los sitios web hermosos y receptivos sean más fáciles y rápidos.
En este artículo, veremos opciones de alineación con el elemento de archivo Bulma. De forma predeterminada, el elemento del archivo Bulma está alineado a la izquierda.
Clases de alineación de archivos Bulma:
- is-centered: esta clase se utiliza para hacer que el elemento del archivo se alinee al centro.
- is-right: esta clase se usa para hacer que el elemento del archivo se alinee a la derecha.
Sintaxis:
<div class="file File-Alignment Class">
.....
</div>
Ejemplo: El siguiente ejemplo ilustra cómo usar las clases is-centered y is-right para alinear el elemento del archivo.
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=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<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>
Producción:
Alineación de archivos Bulma
Referencia: https://bulma.io/documentation/form/file/#alignment