Bulma - Content

Description

Bulma provides content class to use the HTML tags directly in the page.

The below example describes how to display the content by using different types of levels −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Buttons Content
            </span>
            <br>
            <br>
            
            <div class = "content">
               <h1>First Level</h1>
               <p>This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
               This is some <sub>sample text</sub>. 
               This is some sample text.</p>
               
               <h2>Second Level</h2>
               <p>
                  <ul>
                     <li>This is some sample text. This is some sample text.</li>
                     <li>This is some sample text. This is some sample text.</li>
                  </ul>
                  
                  <h3>Third Level</h3>
               <p>
                  <ol>
                     <li>This is some sample text. This is some sample text.</li>
                     <li>This is some sample text. This is some sample text.</li>
                  </ol>
               </p>
               <h4>Fourth Level</h4>
               <blockquote>This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
               This is some <sub>sample text</sub>. 
               This is some sample text.</blockquote>
               
               <h5>Fifth Level</h5>
               <p>This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.</p>
               <figure>
                  <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
                  <figcaption>
                     Figure 1: Placeholder for Image
                  </figcaption>
               </figure>
               
               <h6>Sixth level</h6>
               <table>
                  <thead>
                     <tr>
                        <th>Heading One</th>
                        <th>Heading Two</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>Demo One</td>
                        <td>Demo Two</td>
                     </tr>
                     <tr>
                        <td>Demo Three</td>
                        <td>Demo Four</td>
                     </tr>
                  </tbody>
               </table>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

Execute the above code and you will get the below output −

You can change the font size of the content by using is-small, is-medium and is-large modifiers within the .content class.

bulma_elements.htm
Advertisements