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.
<!DOCTYPE html> < html >
< head >
< title >Bulma Fluid Container</ title >
< link rel = 'stylesheet'
href =
< 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 =
</ 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 =
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://bulma.io/documentation/layout/container/#fluid-container