Contenedor de fluidos Bulma

Bulma es un marco CSS moderno que viene con su propia biblioteca de componentes prediseñados que nos permite hacer sitios web hermosos y receptivos de manera más fácil y rápida. En este artículo, veremos el contenedor de fluidos en Bulma.

Un contenedor fluido es un tipo especial de contenedor que no tiene un ancho máximo y tiene un margen de 32 px en los lados izquierdo y derecho. Para hacer un contenedor de fluidos, debe agregar el modificador is-fluid en el contenedor.

Clase de contenedor de fluidos:

  • is-fluid: esta clase se usa en el contenedor Bulma para convertirlo en un contenedor fluido.

Sintaxis:

<div class="container is-fluid">
  <!-- Your content goes here -->
</div>

Ejemplo: El siguiente ejemplo muestra el uso del modificador is-fluid en un contenedor simple.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Fluid Container</title>
    <link rel='stylesheet'
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
 
    <style>
        .container>div {
            border-radius: 10px;
            margin-top: 25px;
        }
    </style>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
     
     
 
<p><b>Bulma Fluid Container</b></p>
 
 
     
    <div class="container is-fluid">
        <div class="has-background-primary p-6">
            <h3 class="is-size-3">
                What is GeekforGeeks?
            </h3>
             
<p>
                GeeksforGeeks is a computer science
                portal for geeks by geeks. Here
                you can find articles on various
                computer science topics like Data
                Structures, Algorithms and many more
                .... GeekforGeeks was founded by
                Sandeep Jain. GeeksforGeeks also
                provide courses, you can find
                the courses at
                <a href=
"https://practice.geeksforgeeks.org/courses">
                   https://practice.geeksforgeeks.org/courses
                </a>
            </p>
 
 
 
             
<p>
                For cracking interviews of top product
                based companies, you need to have good
                and deep understanding of topics like
                DSA, System design etc. GeeksforGeeks
                provide you quality content so that
                you can prepare for the interviews.
                GeeksforGeeks also have a practice
                portal where you can practice problems
                and brush on your skills. You can visit
                the practice portal at
                <a href=
"https://practice.geeksforgeeks.org">
                   https://practice.geeksforgeeks.org</a>
            </p>
 
 
        </div>
    </div>
</body>
 
</html>

Producción:

Bulma Fluid container

Contenedor de fluido Bulma

Referencia: https://bulma.io/documentation/layout/container/#fluid-container

Publicación traducida automáticamente

Artículo escrito por vpsop 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 *