Bootstrap Display Shortcode

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Donate

Become a backer or sponsor to support our work.

On this page

Sponsors

Syntax

1{{% bs/display %}}
2HEADING
3{{% /bs/display %}}

Parameters

level

NameContextTypeRequiredDefaultSinceExample
level-number-1--

The level of display headings.

class

NameContextTypeRequiredDefaultSinceExample
class-string----

Used to add extra CSS classes.

Examples

Source
 1{{% bs/display %}}
 2Display 1
 3{{% /bs/display %}}
 4
 5{{% bs/display 2 %}}
 6Display 2
 7{{% /bs/display %}}
 8
 9{{% bs/display 3 %}}
10Display 3
11{{% /bs/display %}}
12
13{{% bs/display 4 %}}
14Display 4
15{{% /bs/display %}}
16
17{{% bs/display 5 %}}
18Display 5
19{{% /bs/display %}}
20
21{{% bs/display 6 %}}
22Display 6
23{{% /bs/display %}}
24
25{{% bs/display 1 "text-primary" %}}
26Display with extra classes.
27{{% /bs/display %}}
28
29{{% bs/display level=6 class="text-success" %}}
30Display 6 with extra classes via named parameters.
31{{% /bs/display %}}
Result

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Display with extra classes.

Display 6 with extra classes via named parameters.