- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - Columns Responsiveness & Nesting
Description
Bulma provides responsive columns in the different types of screens like mobile devices, tablets, and desktop. You can display the columns in the mobile, by adding is-mobile modifier within the columns container or else if you wish to display the columns only on desktop, then add is-desktop modifier within the columns container.
Let's create a simple example for mobile and desktop columns as shown below −
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title>Bulma Columns Example</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script> </head> <body> <section class = "section"> <div class = "container"> <span class = "title"> Mobile Columns </span> <br> <br> <div class = "columns is-mobile"> <div class = "column"> <p class = "has-text-black has-background-info">First column</p> </div> <div class = "column"> <p class = "has-text-black has-background-info">Second column</p> </div> <div class = "column"> <p class = "has-text-black has-background-info">Third column</p> </div> <div class = "column"> <p class = "has-text-black has-background-info">Fourth column</p> </div> </div> <br> <span class = "title"> Desktop Columns </span><br><br> <div class = "columns is-desktop"> <div class = "column"> <p class = "has-text-black has-background-info">First column</p> </div> <div class = "column"> <p class = "has-text-black has-background-info">Second column</p> </div> <div class = "column"> <p class = "has-text-black has-background-info">Third column</p> </div> <div class = "column"> <p class = "has-text-black has-background-info">Fourth column</p> </div> </div> </div> </section> </body> </html>
It displays output as shown below −
Nesting Columns
Bulma allows nesting of columns within another column to build responsive columns.
The below simple example demonstrates nesting of columns −
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title>Bulma Columns Example</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script> </head> <body> <section class = "section"> <div class = "container"> <span class = "title"> Nesting Columns </span> <br> <br> <div class = "columns"> <div class = "column"> <p class = "has-background-info">First column</p> <div class = "columns is-mobile"> <div class = "column is-size-6"> <p class = "has-background-primary">First nested column</p> </div> <div class = "column is-size-6"> <p class = "has-background-primary">Second nested column</p> </div> </div> </div> <div class = "column"> <p class = "has-background-info">Second column</p> <div class = "columns is-mobile"> <div class = "column is-4"> <p class = "has-background-primary">is-4</p> </div> <div class = "column is-5"> <p class = "has-background-primary">is-5</p> </div> <div class = "column is-3"> <p class = "has-background-primary">is-3</p> </div> </div> </div> </div> </div> </section> </body> </html>
It displays the output as shown below −
bulma_columns.htm
Advertisements