In this guide, we will discuss Content in Bulma.
Description
Bulma provides a content class to use the HTML tags directly on the page.
The below example describes how to display the content by using different types of levels −
<!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://adglob.in/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>
You can change the font size of the content by using is-small, is-medium and is-large modifiers within the .content class.
Next Topic : Click Here
Pingback: Bulma - Elements | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Button | Adglob Infosystem Pvt Ltd