Bulma Content is use to do the content task in the web, like if you can’t use CSS or when you just want to use HTML tags directly, use content as container. It can handle almost any HTML tag like HTML <p>, <ul>, <ol>, <dl>, <h1> to <h6>, <blockquote>, <em>, <strong>, <table>, <tr>, <th>, and <td> tags.
Bulma Content Class:
- Bulma Full example: This is the use of Bulma content as a container on full page.
- Bulma Content Ordered lists alternatives: Bulma Content Ordered list alternative is used to specify the order type you want to display.
- Bulma Content Sizes: Bulma Content size is an important component that has been use to define the size of the content.
- Bulma Variables: Bulma Content variable is use to manipulate the content interface like color, weight, and etc.
Syntax:
<div class="content is-normal"> .... </div>
Below example illustrate the Bulma Content:
Example 1:
HTML
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet'
href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success" >
GeeksforGeeks
</h1>
<b>Bulma Content</b>
<div class="has-text-left ml-4">
<div class="content is-small">
<h1>Bulma 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>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet'
href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success" >
GeeksforGeeks
</h1>
<b>Bulma Content</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="container">
<div class="columns has-text-left ml-6">
<div class="column content">
<ol class="is-lower-alpha">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</div>
<div class="column content">
<ol class="is-lower-roman">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/elements/content/