Content

Typography

Documentation and examples for typography, including global settings, headings, body text, lists and more. Set your font-family by including the font's @import code into the style.scss or style.css file:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

After embedding the font-family code, the font-family must be specified in CSS, in the theme's assets / scss / _variables.scss file:

$title-font: 'Poppins', sans-serif;
$primary-font: 'Poppins', sans-serif;
$secondary-font: 'Poppins', sans-serif;

Headings

All HTML headings, h1 through h6, are available, also .h1 through .h6 classes are available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Paragraphs

Make a paragraph stand out by adding .lead, smaller size with .text-sm or extra small with .text-xs class.

Large Paragraph (lead).

Regular Paragraph.

Small Paragraph.

XS Paragraph.

.text-primary .text-secondary .text-success .text-info .text-warning .text-danger

<p class="lead">Large Paragraph (lead).</p>
<p>Regular Paragraph.</p>
<p class="text-sm">Small Paragraph.</p>
<p class="text-xs">XS Paragraph.</p>
<p>
    <span class="text-primary mr-5">.text-primary</span>
    <span class="text-secondary mr-5">.text-secondary</span>
    <span class="text-success mr-5">.text-success</span>
    <span class="text-info mr-5">.text-info</span>
    <span class="text-warning mr-5">.text-warning</span>
    <span class="text-danger mr-5">.text-danger</span>
</p>

Lists

We replaced the default list with a featured list by using .list-featured CSS class and also created many custom icon lists by using .list-unstyled.list-icon class and additional classes of the icon types .list-arrow, .list-check, .list-close, .list-bullet, .list-star and .list-dollar and also added classes to change color of the list icons, the color utility classes are: .list-primary, .list-secondary, .list-success, .list-info, .list-warning and .list-danger

List Item 1
List Item 2

List Item 3
List Item 4

List Item 5
List Item 6

List Item 7
List Item 8

<ul class="list-unstyled list-icon list-bullet list-primary mb-25">
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>

<ul class="list-unstyled list-icon list-check list-success mb-25">
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<ul class="list-unstyled list-icon list-arrow list-info mb-25">
    <li>List Item 5</li>
    <li>List Item 6</li>
</ul>

<ul class="list-unstyled list-icon list-star list-warning">
    <li>List Item 7</li>
    <li>List Item 8</li>
</ul>

Blockquotes

We've created a custom blockquote design for this template; with an icon placed in the background of the blockquote paragraph:

Quisque in tortor dolor. In hac habitasse platea dictumst. Vivamus dictum, libero vel hendrerit iaculis, nunc eros posuere diam, id tempus velit nibh eget nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris iaculis ullamcorper venenatis.

<blockquote class="blockquote">
    <i class="fas fa-quote-right blockquote-bg-icon"></i>
    <div class="blockquote-content has-icon">
        <p class="mb-0">Quisque in tortor dolor. In hac habitasse platea dictumst. Vivamus dictum, libero vel hendrerit iaculis, nunc eros posuere diam, id tempus velit nibh eget nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris iaculis ullamcorper venenatis urna vel aliquet. Vestibulum aliquam commodo egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div><!--/ blockquote-content -->
</blockquote>

Icons

The integrated fonts in this theme are Font Awesome 5 and Bootstrap Icons, the font files can be found in the theme's assets / webfonts folder, the CSS files can be found in assets / css folder.

Font Awesome 5

To use Font Awesome, please paste this code into the <head> of your HTML document:

<link rel="stylesheet" href="assets/css/fontawesome-all.min.css" type="text/css">

To add a regular Font Awesome icon to your content, please use fas CSS class in an <i> tag, some Font Awesome icons are also available in Regular font-weight which requires far class and for branding icons, like Facebook, Twitter, Apple, etc. the fab class should be used as seen in the below example:

fas fa-lightbulb

far fa-lightbulb

fab fa-apple

Bootstrap Icons

To use Bootstrap Icons, please paste this code to the top section of your style.css or style.scss file of your website ( the code must go before the first line of your CSS ):

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");

To add a Bootstrap icon to your content, please use bi bi-[icon-name] CSS class on an <i> or <span> tag as seen in the below example:

bi bi-lightbulb-fill

bi bi-lightbulb

bi bi-lightbulb-off

Code

Inline Code

For example, <section> should be wrapped as inline code.

For example, <code>&lt;section&gt;</code> should be wrapped as inline code.

Code Blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre class="language-markup"><code class="language-markup" style="">&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 5, meaning any nested tables will be styled in the same manner as the parent.

You can also invert the colors with light text on dark backgrounds with .table-inverse.

Bordered Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	The Bird	@twitter

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>The Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table><!-- / table -->

Striped Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	The Bird	@twitter

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>The Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table><!-- / table -->

Images

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<img src="assets/images/ph-bg.jpg" class="img-fluid" alt="Responsive image">

Image Shapes

You can shape images with the helper .rectangle, .rounded, .pill, .circle and .rounded-[value] utility classes, the rounded values are from 5 to 30, increasing in steps of 5 (px).

<img style="max-width: 150px; margin-right: 15px;" src="assets/images/ph-mini.jpg" alt="rectangle image" class="img-thumbnail rectangle">
<img style="max-width: 150px; margin-right: 15px;" src="assets/images/ph-mini.jpg" alt="rounded image" class="img-thumbnail rounded-20">
<img style="max-width: 150px; margin-right: 15px;" src="assets/images/ph-mini.jpg" alt="pill image" class="img-thumbnail pill">
<img style="max-width: 150px;" src="assets/images/ph-mini.jpg" alt="circle image" class="img-thumbnail circle">

Videos

Embedded Videos

You can embed videos from Youtube , Vimeo or any other videos sharing service that offers embed links, in our example below we've mebedding a Vimeo video:

<div class="embed-responsive ratio ratio-16x9">
    <iframe src="https://player.vimeo.com/video/173405377?title=0&byline=0&portrait=0" allowfullscreen></iframe>
</div><!-- / embed-responsive -->

Self-hosted Videos

You can embed your own self-hosted videos by using the below example code:

<div class="video-player-wrapper">
    <video src="your-video-url-here" controls></video>
</div><!-- / video-player-wrapper -->