Bulma Content Sizes

Last Updated : 20 Jan, 2022

Bulma Content size is an important component that has been use to define the size of the content. There are some predefined tags for the content based on that this class set the size of the content.

Bulma Content Size Class:

is-small: This class set the content size small.
is-normal: This class set the content size normal which is default.
is-medium: This class set the content size medium.
is-large: This class set the content size large.

Syntax:

<div class="content Size class">
....
</div>

Below example illustrate the Bulma Content Sizes:

Example: In this example we will display 4 different sizes same content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel='stylesheet'
        href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success" > 
        GeeksforGeeks 
    </h1> 
    <b>Bulma Content Size</b> 
    <div class="has-text-left ml-4"> 
    <div class="content is-small"> 
      <h1>Small Size Content:</h1> 
      <p> 
          Bulma is an Open source CSS framework  
          developed by Jeremy Thomas. This framework 
          is based on the CSS Flexbox property. 
      </p> 
  
    </div> 
    <div class="content is-normal"> 
      <h1>Normal Size Content:</h1> 
      <p> 
          Bulma is an Open source CSS framework  
          developed by Jeremy Thomas. This framework 
          is based on the CSS Flexbox property. 
      </p> 
  
    </div> 
    <div class="content is-medium"> 
      <h1>Medium Size Content:</h1> 
      <p> 
          Bulma is an Open source CSS framework  
          developed by Jeremy Thomas. This framework 
          is based on the CSS Flexbox property. 
      </p> 
  
    </div> 
    <div class="content is-large"> 
      <h1>Large Size Content:</h1> 
      <p> 
          Bulma is an Open source CSS framework  
          developed by Jeremy Thomas. This framework 
          is based on the CSS Flexbox property. 
      </p> 
  
    </div> 
    </div> 
</body> 
  
</html>