Tooltips & Popovers

Use Bootstrap Tooltips and Popovers with our custom styles to add tooltips and popovers to any element on your website.

Headings

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

View example's code

<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>

<h1 className="text-uppercase">h1. heading</h1>
<h2 className="text-uppercase">h2. heading</h2>
<h3 className="text-uppercase">h3. heading</h3>
<h4 className="text-uppercase">h4. heading</h4>
<h5 className="text-uppercase">h5. heading</h5>
<h6 className="text-uppercase">h6. heading</h6>

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

View example's code

<h1 className="display-1">Display 1</h1>
<h1 className="display-2">Display 2</h1>
<h1 className="display-3">Display 3</h1>
<h1 className="display-4">Display 4</h1>
<h1 className="display-5">Display 5</h1>
<h1 className="display-6">Display 6</h1>

Tiny Headings

Tiny Heading

Tiny Heading with Line

View example's code

<h2 className="fs-15 text-uppercase text-navy">Tiny heading</h2>
<h2 className="fs-15 text-uppercase text-line text-navy">Tiny heading with line</h2>

Lead

Lead Larger

View example's code

<p className="lead">Lead</p>
<p className="lead fs-lg mb-0">Lead Larger</p>

Lists

Aenean eu leo quam.
Nullam quis risus eget.
Donec id elit non mi porta.

Aenean eu leo quam.
Nullam quis risus eget.
Donec id elit non mi porta.

Aenean eu leo quam.
Nullam quis risus eget.
Donec id elit non mi porta.

View example's code

<ul className="unordered-list bullet-primary mb-0">
  <li>Aenean eu leo quam.</li>
  <li>Nullam quis risus eget.</li>
  <li>Donec id elit non mi porta.</li>
</ul>

<ul className="icon-list bullet-primary mb-0">
  <li>
    <span><i className="uil uil-arrow-right" /></span>
    <span>Aenean eu leo quam.</span>
  </li>
  <li>
    <span><i className="uil uil-arrow-right" /></span>
    <span>Nullam quis risus eget.</span>
  </li>
  <li>
    <span><i className="uil uil-arrow-right" /></span>
    <span>Donec id elit non mi porta.</span>
  </li>
</ul>

<ul className="icon-list bullet-bg bullet-soft-green mb-0">
  <li>
    <span><i className="uil uil-check" /></span>
    <span>Aenean eu leo quam.</span>
  </li>
  <li>
    <span><i className="uil uil-check" /></span>
    <span>Nullam quis risus eget.</span>
  </li>
  <li>
    <span><i className="uil uil-check" /></span>
    <span>Donec id elit non mi porta.</span>
  </li>
</ul>

Blockquote

Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.

Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus.

View example's code

<figure>
  <blockquote className="fs-lg">
    <p>...</p>
  </blockquote>
  <figcaption className="blockquote-footer">Connor Gibson</figcaption>
</figure>

<div className="card mb-0">
  <div className="card-body">
    <figure className=" mb-0">
      <blockquote className="icon fs-lg">
        <p>...</p>
      </blockquote>
      <figcaption className="blockquote-footer mb-0">Connor Gibson</figcaption>
    </figure>
  </div>
</div>

Dropcap

Aenean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.

View example's code

<span className="dropcap text-dark">A</span>
<span className="dropcap text-primary">A</span>
<span className="dropcap rounded-circle text-primary bg-pale-primary">A</span>

Links

Available options:

link-body, link-aqua, link-green, link-leaf, link-navy, link-orange, link-pink, link-purple, link-red, link-violet, link-yellow, link-fuchsia, link-sky, link-grape.

Link example Link example Link example
Link example Link example Link example
Link example Link example Link example

View example's code

import NextLink from 'components/reuseable/links/NextLink';

<NextLink title="Link example" href="#" className="hover link-body me-4 ms-1 mb-5" />
<NextLink title="Link example" href="#" className="hover me-4 mb-5" />
<NextLink title="Link example" href="#" className="hover more me-4 mb-5" />

<NextLink title="Link example" href="#" className="hover-2 link-body me-4 mb-5" />
<NextLink title="Link example" href="#" className="hover-2 me-4 mb-5" />
<NextLink title="Link example" href="#" className="hover-2 more me-4 mb-5" />

<NextLink title="Link example" href="#" className="hover-3 link-body me-4" />
<NextLink title="Link example" href="#" className="hover-3 me-4" />
<NextLink title="Link example" href="#" className="hover-3 more me-4" />

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Tooltips & Popovers

Headings

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Tiny Headings

Tiny Heading

Tiny Heading with Line

Lead

Lists

Blockquote

Dropcap

Links

Think unique and be creative. Make a difference with Sandbox.