Bulma 3 Columns Tiles
In this article, we’ll see Bulma 3 Columns Tiles. Bulma framework uses tile elements for building tiles in web applications. In Bulma, tile elements are used to build a 2D design pattern as you may have seen in various websites such as Pinterest, etc. In Bulma, we can create 3 columns tiles and can create a grid structure of three columns.
Bulma 3 Columns Tiles Class: There is no defined class to create 4 columns in Bulma, we need to simply put 4 div inside of ancestor class.
Syntax: Below is the syntax of 3 column tiles.
<div class="tile is-ancestor"> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> </div> <div class="tile is-ancestor"> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> </div> <div class="tile is-ancestor"> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> </div>
Example 1: Below example illustrates the Bulma 3 Columns Tiles.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </ head > < body > < div class = "content container has-text-centered" > < h1 class = "title has-text-success" >GeekforBeginner</ h1 > < h1 class = "subtitle" >Bulma 3 Column Tiles</ h1 > <!-- Tiles starts here --> < div class = "tile is-ancestor" > < div class = "tile is-parent" > < article class="tile is-child box has-background-success"> < p class = "title" >Column One</ p > < p class = "subtitle" >Hola! Hi...</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-warning"> < p class = "title" >Column Two</ p > < p class = "subtitle" >What's up?</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-dark"> < p class = "title has-text-white" >Column Three</ p > < p class = "subtitle has-text-white" >How are you??</ p > < div class = "content" > < p class = "has-text-white" > Please tell me something about you and let's get to know each other. </ p > </ div > </ article > </ div > </ div > < div class = "tile is-ancestor" > < div class = "tile is-vertical is-8" > < div class = "tile" > < div class = "tile is-parent is-vertical" > < article class="tile is-child box has-background-info"> < p class = "title" >Vertical Tiles</ p > < p class = "subtitle" >Connect</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-white"> < p class = "title" >GeekforBeginner</ p > < p class = "subtitle" >Welcome Geek!</ p > < figure class = "image is-3by2" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png" /> </ figure > </ article > </ div > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-primary"> < p class = "title" >Widest Column</ p > < p class = "subtitle" >Need help?</ p > </ article > </ div > </ div > < div class = "tile is-parent" > < article class = "tile is-child box has-background-warning" > < div class = "content" > < p class = "title" >Tallest Column</ p > < p class = "subtitle" >Want to know something?</ p > < div class = "content" > < p > You can learn anything you want. You can learn how to code, about coding competitions and so on. You can learn how to solve problems, about problems and so on. You can learn how to be a good programmer, about programming and so on. You can learn how to be a good programmer, about programming and so on, etc. </ p > < p > GFG also provides various courses on various topics. Various internships are also available for students like technical content writing, android development, etc. </ p > < p > GeekforBeginner is the best place to learn about coding, competitive programming, problems, etc. </ p > </ div > </ div > </ article > </ div > </ div > < div class = "tile is-ancestor" > < div class = "tile is-parent" > < article class = "tile is-child box has-background-info" > < p class = "title" >Side Left Column</ p > < p class = "subtitle" >You made it here.</ p > < div class = "content" > < p > GFG has designed various programming courses including questions in order of difficulty and various other features. </ p > </ div > </ article > </ div > < div class = "tile is-parent is-8" > < article class = "tile is-child box has-background-danger" > < p class = "title" >Main Column</ p > < p class = "subtitle" >Hope you find it helpful.</ p > < div class = "content" > < p > CP means solving well-defined problems by writing programs below the specified limits. On GFG practice platform, you need to write code under many restrictions, like code execution time and memory limits for your program. </ p > </ div > </ article > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: Another example for Bulma 3 Columns Tiles.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </ head > < body > < div class = "content container has-text-centered" > < h1 class = "title has-text-success" >GeekforBeginner</ h1 > < h1 class = "subtitle" >Bulma 3 Column Tiles</ h1 > <!-- Tiles starts here --> < div class = "tile is-ancestor" > < div class = "tile is-parent" > < article class="tile is-child box has-background-warning"> < p class = "title" >Coding </ p > < p class = "subtitle" >Learn to code</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-success"> < p class = "title" >Practice</ p > < p class = "subtitle" > Level up your skills in coding </ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-danger"> < p class = "title has-text-white" >Web Tech</ p > < p class = "subtitle has-text-white" > HTML, CSS, JS </ p > < div class = "content" > < p class = "has-text-white" > Learn about web development and other web frameworks </ p > </ div > </ article > </ div > </ div > < div class = "tile is-ancestor" > < div class = "tile is-vertical is-8" > < div class = "tile" > < div class = "tile is-parent is-vertical" > < article class="tile is-child box has-background-dark"> < p class = "title has-text-white" >Tutorials</ p > < p class = "subtitle has-text-white" > Learn from Tutorials at GFG </ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-white"> < p class = "title" >GeekforBeginner</ p > < p class = "subtitle" >Welcome Geek!</ p > < figure class = "image is-4by4" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png" > </ figure > </ article > </ div > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-info "> < p class = "title has-text-white" > Participate in Coding Competitions </ p > < p class = "subtitle has-text-white" > C++, Java, DSA , etc </ p > </ article > </ div > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-primary"> < div class = "content" > < p class = "title has-text-white" > Apply for Jobs</ p > < p class = "subtitle has-text-white" > Get Hired in your dream company </ p > < div class = "content" > < p class = "has-text-white" > Learn at GFG </ p > < p class = "has-text-white" > Apply for jobs at various companies </ p > < p class = "has-text-white" > Get Hired </ p > </ div > </ div > </ article > </ div > </ div > </ div > </ body > </ html > |
Output: