Brecha de incumplimiento de Bulma

En este artículo, veremos la brecha de Bulma Default. El espacio predeterminado de Bulma se usa en columnas en las que cada columna tiene el mismo o igual espacio que la variable que tiene un valor de 0.75 rem

Clase de brecha predeterminada de Bulma: no se usa una clase específica, pero la clase de columna se puede usar para dar la brecha entre diferentes columnas.

Sintaxis:

<div class="columns">
 <div class="column">
 ....
 </div>
</div>

El siguiente ejemplo ilustra la brecha de incumplimiento de Bulma:

Ejemplo:

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"
    />
</head>
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b class="is-size-5">
      Bulma Default gap
    </b>
    <div class="columns m-4">
        <div class="column has-background-primary">
          Default Gap Column
        </div>
        <div class="column has-background-info">
          Default Gap Column
        </div>
        <div class="column has-background-success">
          Default Gap Column
        </div>
        <div class="column has-background-black has-text-white">
          Default Gap Column
        </div>
    </div>
</body>
</html>

Producción:

Bulma Default Gap

Brecha de incumplimiento de Bulma

Referencia: https://bulma.io/documentation/columns/gap/#default-gap

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *