- var theme_customizer = true; - var tooltip = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Typography ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Base li.breadcrumb-item.active Typography .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header.pb-0 h5 Headings span | All HTML headings, code <h1> | through code <h6> | , are available. .card-body.typography .row .col-sm-12.col-xl-6 h1 This is a Heading 1 h2 This is a Heading 2 h3 This is a Heading 3 h4 This is a Heading 4 h5 This is a Heading 5 h6 This is a Heading 6 .col-sm-12.col-xl-6 p.h1.txt-primary | Heading 1 small Sub Heading p.h2.txt-secondary | Heading 2 small Sub Heading p.h3.txt-success | Heading 3 small Sub Heading p.h4.txt-info | Heading 4 small Sub Heading p.h5.txt-warning | Heading 5 small Sub Heading p.h6.txt-danger | Heading 6 small Sub Heading .col-sm-12.col-xl-4 .card .card-header.pb-0 h5 Very Thin (100) .card-body.typography h1.f-w-100 Heading 1 h2.f-w-100 Heading 2 h3.f-w-100 Heading 3 h4.f-w-100 Heading 4 h5.f-w-100 Heading 5 h6.f-w-100 Heading 6 .col-sm-12.col-xl-4 .card .card-header.pb-0 h5 Thin (300) .card-body.typography h1.f-w-300 Heading 1 h2.f-w-300 Heading 2 h3.f-w-300 Heading 3 h4.f-w-300 Heading 4 h5.f-w-300 Heading 5 h6.f-w-300 Heading 6 .col-sm-12.col-xl-4 .card .card-header.pb-0 h5 Normal (400) .card-body.typography h1.f-w-400 Heading 1 h2.f-w-400 Heading 2 h3.f-w-400 Heading 3 h4.f-w-400 Heading 4 h5.f-w-400 Heading 5 h6.f-w-400 Heading 6 .col-sm-12.col-xl-4 .card .card-header.pb-0 h5 light Normal (600) .card-body.typography h1.f-w-600 Heading 1 h2.f-w-600 Heading 2 h3.f-w-600 Heading 3 h4.f-w-600 Heading 4 h5.f-w-600 Heading 5 h6.f-w-600 Heading 6 .col-sm-12.col-xl-4 .card .card-header.pb-0 h5 Bold (700) .card-body.typography h1.f-w-700 Heading 1 h2.f-w-700 Heading 2 h3.f-w-700 Heading 3 h4.f-w-700 Heading 4 h5.f-w-700 Heading 5 h6.f-w-700 Heading 6 .col-sm-12.col-xl-4 .card .card-header.pb-0 h5 Extra Bold (900) .card-body.typography h1.f-w-900 Heading 1 h2.f-w-900 Heading 2 h3.f-w-900 Heading 3 h4.f-w-900 Heading 4 h5.f-w-900 Heading 5 h6.f-w-900 Heading 6 .col-sm-12 .card .card-header.pb-0 h5 Headings span Use the included utility classes to recreate the small secondary heading text. .card-body.typography h3 | Fancy display heading small.text-muted With faded secondary text .col-sm-12 .card .card-header.pb-0 h5 Display headings span | 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 strong display heading | —a larger, slightly more opinionated heading style. .card-body.typography h1.display-1 Display 1 h1.display-2 Display 2 h1.display-3 Display 3 h1.display-4 Display 4 .col-sm-12 .card .card-header.pb-0 h5 Lead span | Make a paragraph stand out by adding code .lead | . .card-body p.lead | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. .col-sm-12.col-xl-6 .card .card-header.pb-0 h5 Inline text elements span Styling for common inline HTML5 elements. .card-body p | You can use the mark tag to mark highlight | text. p del This line of text is meant to be treated as deleted text. p s This line of text is meant to be treated as no longer accurate. p ins This line of text is meant to be treated as an addition to the document. p u This line of text will render as underlined p small This line of text is meant to be treated as fine print. p strong This line rendered as bold text. p em This line rendered as italicized text. .col-sm-12.col-xl-6 .card .card-header.pb-0 h5 Text Color span You can Give text color by using txt-* class .card-body p.txt-primary | This is Primary text You can archive this adding code .txt-primary | class p.txt-secondary | This is Secondary text You can archive this adding code .txt-secondary | class p.txt-success | This is Success text You can archive this adding code .txt-success | class p.txt-info | This is Info text You can archive this adding code .txt-info | class p.txt-warning | This is Warning text You can archive this adding code .txt-warning | class p.txt-danger | This is Danger text You can archive this adding code .txt-danger | class p.txt-dark | This is Dark text You can archive this adding code .txt-dark | class p.txt-primary | This is Primary text You can archive this adding code .txt-primary | class .col-sm-12.listing .card .card-header.pb-0 h5 Listing Typography .card-body .row .col-sm-12.col-xl-4 h6.sub-title Unorder list ul li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet .col-sm-12.col-xl-4 h6.sub-title Order list ol li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li ol li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet li Lorem ipsum dolor sit amet .col-sm-12.col-xl-4 h6.sub-title Order list dl dt Lorem ipsum dolor sit amet dd - ipsum dolor sit amet dt Lorem ipsum dolor sit amet dd - ipsum dolor sit amet dt Lorem ipsum dolor sit amet dd - ipsum dolor sit amet dt Lorem ipsum dolor sit amet dd - ipsum dolor sit amet dt Lorem ipsum dolor sit amet dd - ipsum dolor sit amet .col-sm-12.col-xl-4 h6.sub-title Fontawesome list ul li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-angle-double-right.txt-primary.m-r-10 | Lorem ipsum dolor sit amet .col-sm-12.col-xl-4 h6.sub-title ICO Icon list ul li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet li i.fa.fa-caret-right.txt-secondary.m-r-10 | Lorem ipsum dolor sit amet .col-sm-12.col-xl-4 h6.sub-title Themfy list ul li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet li i.icofont.icofont-ui-rate-add.txt-success.m-r-10 | Lorem ipsum dolor sit amet .col-sm-12 .card .card-header.pb-0 h5 Blockquotes span | Add a code <footer class="blockquote-footer"> | for identifying the source. Wrap the name of the source work in code <cite> | . .card-body p.sub-title Naming a source .figure.d-block blockquote.blockquote p.mb-0 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. .blockquote-footer | Someone famous in cite(title='Source Title') Source Title p.sub-title Alignment Center .figure.text-center.d-block blockquote.blockquote p.mb-0 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. .blockquote-footer | Someone famous in cite(title='Source Title') Source Title p.sub-title Alignment Right .figure.text-end.d-block blockquote.blockquote p.mb-0 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. .blockquote-footer | Someone famous in cite(title='Source Title') Source Title // Container-fluid Ends include ../../components/footer include ../../components/footer-files