Content

A single class to handle WYSIWYG generated content, where only HTML tags are available

Colors No

Sizes Yes

Variables Yes

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

<p> paragraphs
<ul> <ol> <dl> lists
<h1> to <h6> headings
<blockquote> quotes
<em> and <strong>
<table> <tr> <th> <td> tables

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

Since 0.7.2

Ordered lists <ol> support different types of items markers. To modify them, use either:

the corresponding HTML attribute value
one of the following CSS modifier classes: is-lower-alpha, is-lower-roman, is-upper-alpha or is-upper-roman

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

      <div class="content">
  <ol type="1">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol type="A">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol type="I">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
</div>
    

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

      <div class="content">
  <ol class="is-lower-alpha">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol class="is-lower-roman">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol class="is-upper-alpha">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol class="is-upper-roman">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
</div>
    

Sizes #

You can use the is-small, is-medium and is-large modifiers to change the font size.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

In fermentum leo eu lectus mollis, quis dictum mi aliquet.
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
Ut non enim metus.

Hello World

Second level

In fermentum leo eu lectus mollis, quis dictum mi aliquet.
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
Ut non enim metus.

Hello World

Second level

In fermentum leo eu lectus mollis, quis dictum mi aliquet.
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
Ut non enim metus.

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name	Type	Default value	Computed value
Name	Type	Default value	Computed value
`$content-heading-color`	color	`$text-strong`	`hsl(0, 0%, 21%)`
`$content-heading-weight`	font-weight	`$weight-semibold`	`600`
`$content-heading-line-height`	unitless	`1.125`
`$content-blockquote-background-color`	color	`$background`	`hsl(0, 0%, 96%)`
`$content-blockquote-border-left`	size	`5px solid $border`
`$content-blockquote-padding`	size	`1.25em 1.5em`
`$content-pre-padding`	size	`1.25em 1.5em`
`$content-table-cell-border`	size	`1px solid $border`
`$content-table-cell-border-width`	size	`0 0 1px`
`$content-table-cell-padding`	size	`0.5em 0.75em`
`$content-table-cell-heading-color`	color	`$text-strong`	`hsl(0, 0%, 21%)`
`$content-table-head-cell-border-width`	size	`0 0 2px`
`$content-table-head-cell-color`	color	`$text-strong`	`hsl(0, 0%, 21%)`
`$content-table-foot-cell-border-width`	size	`2px 0 0`
`$content-table-foot-cell-color`	color	`$text-strong`	`hsl(0, 0%, 21%)`