Bulma is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
The container class in Bulma is the element to place the content in the center horizontally. In this article, we will discuss the default behavior of the container.
The default behavior of the container will be activated from the desktop breakpoint. When the screen size is equal to widescreen or full HD, then the container will automatically increase its maximum width.
Note: The container width is given by $device – (2 * $gap)
- device: It is the type of device we are using.
- gap: It is the default value 32px but we can modify it.
The behavior of the container can be shown as
- desktop: It will have a maximum width of 960 px.
- widescreen: It will have a maximum width of 1152 px.
- Full HD: It will have a maximum width of 1344 px.
Syntax:
<div class="container">
....
</div>Example 1: The following code demonstrates the container class for the default behavior.
<!DOCTYPE html> <html>
<head>
<title>Bulma Container Default Behavior</title>
<link rel='stylesheet' href=
</head>
<body>
<center>
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Default Container
</b>
</center>
<div class="container">
<div class="has-background-primary" >
<h2 class="has-text-white is-size-4">
Example of default behavior of Container
</h2>
<h2 class="has-text-white is-size-4">
It is centered in desktop and widescreens
</h2>
<h3 class="has-text-white is-size-4">
GeeksforGeeks
</h3>
</div>
</div>
</body>
</html>
|
Output:
Bulma Container Default Behavior
Example 2: If we use the is-fluid modifier class then there will be a 32 px gap on both sides of the screen in any viewport. This helps in understanding the container class better.
<!DOCTYPE html> <html>
<head>
<title>Bulma Container Default Behavior</title>
<link rel='stylesheet' href=
</head>
<body>
<center>
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Default Container
</b>
</center>
<div class="container is-fluid">
<div class="has-background-grey">
<h1>
<strong class="has-text-white">
GeeksforGeeks
</strong>
</h1>
<p class="has-text-white">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles</p>
<p class="has-text-white">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</p>
</div>
</div>
</body>
</html>
|
Output:
Bulma Container Default Behavior
Reference link: https://bulma.io/documentation/layout/container/#default-behavior