Bulma Layout

Bulma Layout Bulma Css provides various classes that can be used to create layout such as – container, media object, section and footer etc. Here in this tutorial,we are going to explain each topics with example and demo.

Bulma Layout | Container | Section

Following topics are covered in this tutorial-

1. Container
2. Level
3. Media Object
4. Hero
5. Section
6. Footer
7. Tiles

Container

.container class is used to create container. Container class can be used anywhere but it mostly used direct child of navbar, hero, section and footer.

<div class="container">
  <div class="notification">
    This container is <strong>Demo Container</strong> on desktop.
  </div>
</div>

If you run the above example it will produce the output something like this-

• On Desktop– On Desktop maximum width is 960px and it will be horizontally centered.
• On Widescreen– On widescreen maximum width is 1152px.
• On Full Hd– On Full Hd maximum width will be 1344px.

Fluid Container

If you want to create a container of full width with 24px margin on left and right side add class is-fluid to container.

<div class="container is-fluid">
	<div class="notification">
			    This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
         </div>
</div>

If you run the above exmaple it will produce output something like this-

Breakpoint Containers

Using modifiers – .is-widescreen and .is-fullhd we can create fullwidth container until the specific breakpoints.

<div class="container is-widescreen">
   <div class="notification">
	This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
   </div>
</div>

Level

Level is basically container which can contain any other element.

To create level you need to create a wrapper element with class – .level then add container with class .level-left and .level-right and then add level item by adding class .level-item.

<nav class="level">
       <!-- Left side -->
	<div class="level-left">
	<p class="level-item"><strong>Left Side</strong></p>
	</div>
        <!-- Right side -->
	<div class="level-right">
	<p class="level-item"><strong>Right Side</strong></p>
	<p class="level-item">Published</p>
	<p class="level-item">Drafts</p>
	<p class="level-item">Deleted</p>>
	</div>
  </nav>

If you run the above example it will produce output something like this-

Centered Level

If you want to make the level text centered add the class- has-text-centered to the level item container.

<nav class="level">
  <div class="level-item has-text-centered">
	<p class="level-item has-text-centered"></p><h3>Item 1</h3>
  </div>
  <div class="level-item has-text-centered">
	<p class="level-item has-text-centered"></p><h3>Item 2</h3>
  </div>
  <div class="level-item has-text-centered">
	<p class="level-item has-text-centered"></p><h3>Item 3</h3>
  </div>
  <div class="level-item has-text-centered">
	<p class="level-item has-text-centered"></p><h3>Item 4</h3>
   </div>        
</nav>

If you run the above example it will produce output something like this-

Media Object

Bulma provides classes to create media object. Media object is basically ui element that is used for repeatable content.

 <article class="media">
		  <figure class="media-left">
		    <p class="image is-64x64">
		      <amp-img src="https://bulma.io/images/placeholders/128x128.png" width="600" height="400" class="amp-wp-unknown-size amp-wp-enforced-sizes" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
		    </p>
		  </figure>
		  <div class="media-content">
		    <div class="content">
		      <p>
		        <strong>John Dee</strong> <small>@johndee</small> <small>35m</small>
		        <br/>
              This is dummy Text....		        
		        </p>
		    </div>
		    <nav class="level is-mobile">
		      <div class="level-left">
		        
		          <span class="icon is-small"><i class="fa fa-reply"></i></span>
		        
		        
		          <span class="icon is-small"><i class="fa fa-retweet"></i></span>
		        
		        
		          <span class="icon is-small"><i class="fa fa-heart"></i></span>
		        
		      </div>
		    </nav>
		  </div>
		  <div class="media-right">
		    <button class="delete"></button>
		  </div>
		</article>

Hero

Bulma provides classes to create Hero banners which can be used to showcase something. Class hero and hero-body is used to create hero banner.

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>

On the same way you can change the background color of Hero banner using modifier classes.

If you run the above example it will produce output something like this-

Colored Hero Banner

You can watch this video for demo-

Sections

Section is basically a container that is used to divide page into parts. Sections are directly used as child of body.

  <section class="section">
    <div class="container">
      <h1 class="title">My Section</h1>
      <h2 class="subtitle">
       This is simple container.
      </h2>
    </div>
  </section>

Footer

Bulma provides footer class to create responsive footer. Footer can contain lists, columns, icons and buttons etc.

<footer class="footer">
  <div class="container">
    <div class="content has-text-centered is-info">
      <p>© Copyright 2017. All Rights Reserved.</p>
    </div>
  </div>
</footer>