November 7, 2017

Bulma Tiles

❮❮ Previous
Next ❯❯

Bulma Tiles– Bulma Css provides classes to create two-dimensional elements called tiles. You can create beautiful tiles layout using these classes. Here in this article we are going to explain the tiles with different-different examples.

Bulma Tiles Example

Let us create very basic tile. Create an element with class title and then add child elements. Here is an example-

Bulma Tiles | Example:

<div class="tile is-ancestor">
	  <div class="tile is-4 is-vertical is-parent">
	    <div class="tile is-child box notification is-primary">
	      <p class="title">First Tile</p>
	    </div>
	    <div class="tile is-child box notification is-info">
	      <p class="title">Second Tile</p>
	    </div>
	  </div>
	  <div class="tile is-parent">
	    <div class="tile is-child box notification is-warning">
	      <p class="title">Third Tile</p>
	    </div>
	  </div>
	</div>

Try it »

If yo run the above example it will produce the output something like this.

Bulma Tiles Example

Modifiers

Tiles has following modifiers-

  1. 3 Contextual

    is-ancestor
    is-parent
    is-child
  2. 1 Directional
    is-vertical
  3. 12 horizontal Size
    is-1 to is-12– You can use any size like – is-1, is-2, is-3, is-4…..is-12.

Nested Tiles

You can create nested tiles using the class- tiles.

| Example:

<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 notification is-primary">
	          Title 1
	        </article>
	        <article class="tile is-child box notification is-info">
	          Title 2
	        </article>
	      </div>
	      <div class="tile is-parent">
	        <article class="tile is-child box notification is-warning">
	         Title 3
	        </article>
	      </div>
	    </div>
	    <div class="tile is-parent">
	      <article class="tile is-child box notification  is-link">
	        Title 4
	      </article>
	    </div>
	  </div>
	  <div class="tile is-parent">
	    <article class="tile is-child box notification is-primary">
	      Title 5
	    </article>
	  </div>
	</div>

Try it »

If You run the above example it will look something like this –

Bulma Nested Tiles Example


Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯