Bulma is a free and open-source CSS framework used to build responsive and beautiful websites. It is based on flexbox. In this article, we will be seeing the multiline option in columns in Bulma.
So, by default, all the columns inside a column container will be in the same row but we can use the is-multiline modifier on the columns container to make the columns wrap on multiple lines.
Bulma Multiline Option Classes:
- is-multiline: This class is used on the columns container to make the columns wrap in multiple lines.
Syntax:
<div class="columns is-multiline">
...
</div>Example: The below example illustrates the use of the is-multiline class in Bulma to make the columns wrap on multiple lines.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Multiline Option</title>
<link rel='stylesheet' href=
<style>
.container{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma Multiline Option</b>
<div class="container is-fluid">
<div class="columns is-multiline">
<div class="column is-half">
<div class="notification is-link">
<code>is-half</code>
</div>
</div>
<div class="column is-half">
<div class="notification is-link">
<code>is-half</code>
</div>
</div>
<div class="column is-one-quarter">
<div class="notification is-link">
<code>is-one-quarter</code>
</div>
</div>
<div class="column is-two-quarter">
<div class="notification is-link">
<code>is-two-quarter</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
<code>Auto width</code>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Bulma Multiline Option
Reference: https://bulma.io/documentation/columns/options/#multiline