Bulma 4 columns Tiles
In this article, we’ll see Bulma 4 Columns Tiles. For creating a grid-like structure in your web application, the Bulma framework provides tile elements. These elements are used in building a 2D design pattern like Pinterest, etc. In Bulma, we can also create 4 columns tiles that can be used where there is a need for building a grid system of 4 columns.
Bulma 4 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 showing the 4 column tiles.
<div class="tile is-ancestor"> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> <div class="tile is-parent"> <div class="tile is-child"> .... </div> </div> </div>
Example 1: Below example illustrate Bulma 4 column Tiles
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bulma 4 columns Tiles</ title > < 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 4 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" >Tile One</ p > < p class = "subtitle" >Subtitle</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-info"> < p class = "title" >Tile Two</ p > < p class = "subtitle" >Subtitle</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-danger"> < p class = "title" >Tile Three</ p > < p class = "subtitle" >Subtitle</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-primary"> < p class = "title" >Tile Four</ p > < p class = "subtitle" >Subtitle</ p > </ article > </ div > </ div > < div class = "tile is-ancestor" > < div class = "tile is-vertical is-9" > < div class = "tile" > < div class = "tile is-parent" > < article class="tile is-child box has-background-success"> < p class = "title" >Tile Five</ p > < p class = "subtitle" >Subtitle</ p > < div class = "content" > </ div > </ article > </ div > < div class = "tile is-8 is-vertical" > < div class = "tile" > < div class = "tile is-parent" > < article class="tile is-child box has-background-dark"> < p class = "title has-text-white" > Tile Six</ p > < p class = "subtitle has-text-white" > Subtitle</ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-warning"> < p class = "title" > Tile Seven</ p > < p class = "subtitle" > Subtitle</ p > </ article > </ div > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-danger"> < p class = "title" > Tile Eight</ p > < p class = "subtitle" > Subtitle</ p > </ article > </ div > </ div > </ div > < div class = "tile" > < div class = "tile is-8 is-parent" > < article class="tile is-child box has-background-info"> < p class = "title" > Tile Nine</ p > < p class = "subtitle" > Subtitle</ p > < div class = "content" > </ div > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-success"> < p class = "title" >Tile Ten</ p > < p class = "subtitle" >Subtitle</ p > < div class = "content" > </ div > </ article > </ div > </ div > </ div > < div class = "tile is-parent" > < article class = "tile is-child box" > < div class = "content" > < p class = "title has-text-success" > w3wiki </ p > < p class = "subtitle" >Tile Eleven</ p > < div class = "content" > < figure class = "image is-4by4" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png" > </ figure > < p > Learn about web development and other web frameworks </ p > </ div > </ div > </ article > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: Another example illustrating Bulma 4 column Tiles
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bulma 4 columns Tiles</ title > < 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 4 Column Tiles</ h1 > <!-- Tiles starts here --> < div class = "tile is-ancestor" > < div class = "tile is-parent" > < article class="tile is-child box has-background-light"> < p class = "title" >PRACTICE</ p > < p class = "subtitle" > Practice your coding knowledge </ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-success"> < p class = "title" >CODING COMPETITIONS</ p > < p class = "subtitle" > Participate in programming competitions </ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-warning"> < p class = "title" >JOBS</ p > < p class = "subtitle" > Find and apply for your favourite jobs </ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-info"> < p class = "title" >GBLOGS</ p > < p class = "subtitle" > All tech related blogs</ p > </ article > </ div > </ div > < div class = "tile is-ancestor" > < div class = "tile is-vertical is-8" > < div class = "tile" > < div class = "tile is-parent" > < article class="tile is-child box has-background-dark"> < p class = "title has-text-white" >TUTORIALS</ p > < p class = "subtitle has-text-white" > Java, C++, Python, etc</ p > < div class = "content" > </ div > </ article > </ div > < div class = "tile is-8 is-vertical" > < div class = "tile" > < div class = "tile is-parent" > < article class="tile is-child box has-background-danger"> < p class = "title" >CS SUBJECTS</ p > < p class = "subtitle" > OS, DBMS, CN, SQL </ p > </ article > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-primary"> < p class = "title" >WEB TECHNOLOGIES</ p > < p class = "subtitle" > HTML, CSS, JS, React, BootStrap </ p > </ article > </ div > </ div > < div class = "tile is-parent" > < article class="tile is-child box has-background-warning"> < p class = "title" >DSA</ p > < p class = "subtitle" > Learn about Data Structures and Algorithms </ p > </ article > </ div > </ div > </ div > </ div > < div class = "tile is-parent" > < article class = "tile is-child box" > < div class = "content" > < p class = "title has-text-success" >w3wiki</ p > < p class = "subtitle" >Tile Eleven</ p > < div class = "content" > < figure class = "image is-4by4" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png" > </ figure > < p > Learn about web development and other web frameworks </ p > </ div > </ div > </ article > </ div > </ div > </ div > </ body > </ html > |
Output: