Heading elements represent six levels of section headings.
<h1> <h2> <h3> <h4> <h5> <h6>
<p class="small text-muted mb-4">Each row: semantic tag (left) vs <code>.hN</code> on <code><p></code> (right).</p>
<article class="row">
<div class="col-md-6">
<h1>Heading 1</h1>
</div>
<div class="col-md-6">
<p class="h1">Heading 1</p>
</div>
</article>
<article class="row">
<div class="col-md-6">
<h2>Heading 2</h2>
</div>
<div class="col-md-6">
<p class="h2">Heading 2</p>
</div>
</article>
<article class="row">
<div class="col-md-6">
<h3>Heading 3</h3>
</div>
<div class="col-md-6">
<p class="h3">Heading 3</p>
</div>
</article>
<article class="row">
<div class="col-md-6">
<h4>Heading 4</h4>
</div>
<div class="col-md-6">
<p class="h4">Heading 4</p>
</div>
</article>
<article class="row">
<div class="col-md-6">
<h5>Heading 5</h5>
</div>
<div class="col-md-6">
<p class="h5">Heading 5</p>
</div>
</article>
<article class="row mb-3 align-items-start">
<div class="col-md-6">
<h6>Heading 6</h6>
</div>
<div class="col-md-6">
<p class="h6">Heading 6</p>
</div>
</article>
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "elements",
"shouldLoadDocs": true,
"shouldLoadBootstrap": true
}