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:
Contenedor de fluido Bulma
Referencia: https://bulma.io/documentation/layout/container/#fluid-container