Bulma Options
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to carry out its design.
The ‘select’ component of a form is not that attractive in look. Using Bulma we can design select elements of the form in a far better way just by adding some simple Bulma classes. Bulma select elements are available in different colors, different styles, different sizes, and different states.
Column Options: It is used to design different types of column layouts.
Column Option categories:
- Vertical alignment: It is used to align your columns vertically, add the is-vcentered modifier to the columns container.
- Multiline: It is used to add the is-multiline modifier and add more column elements that would fit in a single row.
- Centering columns: It is used to create horizontal space around column elements, you can also use is-centered on the parent columns element.
Example 1: In the below code, we have made use of the centering columns to create horizontal space around column elements, you can also use is-centered on the parent columns element.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= </head> <body> <h2 style="color:green;font-size:30px; text-align:center"> GeeksforGeeks </h2><br> <div class="columns is-mobile is-multiline is-centered"> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br/> <br/> Column 1 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br> <br/> Column 2 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br> <br/> Column 3 </p> </div> </div> </body> </html> |
Output:
Example 2: The following code demonstrates other modifier classes like is-half along with column class.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= </head> <body> <h2 style="color:green;font-size:30px; text-align:center"> GeeksforGeeks </h2><br> <div class="columns is-mobile is-multiline is-centered"> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br><br/> Column 1 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br><br/> Column 2 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br><br/> Column 3 </p> </div> <div class="columns is-mobile is-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <code class="html">is-half</code><br> 1-half </p> </div> </div> <div class="columns is-mobile is-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <code class="html">is-half</code><br> 2-half </p> </div> </div> <div class="columns is-mobile is-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <code class="html">is-half</code><br> 3-half </p> </div> </div> </div> </body> </html> |
Output:
Reference: https://bulma.io/documentation/columns/options/
Please Login to comment...