What is Bulma Fluid Container?

In this article, we will learn Bulma Fluid Container,This free Bulma tutorial for complete beginners will help you learn Bulma from scratch.

Bulma Fluid Container - ❤️Bulma Tutorials In 2024

Q: How to use Bulma Fluid Container in Bulma?

Bulma is a modern CSS framework that comes with its own library of pre-styled components that enables us to make beautiful and responsive websites easier and faster

Bulma is a modern CSS framework that comes with its own library of pre-styled components that enables us to make beautiful and responsive websites easier and faster. In this article, we will be seeing the fluid container in Bulma.

A fluid container is a special type of container that does not have a maximum width and has a 32px margin on both left and right sides. To make a container fluid container you have to add is-fluid modifier on the container.

Fluid Container Class:

is-fluid: This class is used on the Bulma container to change it into a fluid container.

Syntax:

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

Example: The below example shows the use of is-fluid modifier on a simple container.

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">
        w3wiki
    </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 GeekforBeginner?
            </h3>
             
<p>
                w3wiki is a computer science 
                portal for Beginner by Beginner. Here
                you can find articles on various 
                computer science topics like Data
                Structures, Algorithms and many more
                .... GeekforBeginner was founded by
                Sandeep Jain. w3wiki also 
                provide courses, you can find
                the courses at
                <a href=
"https://www.w3wiki.net/courses">
                   https://www.w3wiki.net/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. w3wiki 
                provide you quality content so that 
                you can prepare for the interviews. 
                w3wiki 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.w3wiki.net">
                   https://practice.w3wiki.net</a>
            </p>
 
 
        </div>
    </div>
</body>
 
</html>

Output:

Bulma Fluid container

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