Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          
Bootstrap docs

Tooltips

Custom tooltips for local title storage.

Static examples

Live demo

<!-- Tooltip on top -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>

<!-- Tooltip on right -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>

<!-- Tooltip on bottom -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>

<!-- Tooltip on left -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

<!-- Tooltip with HTML -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Small size

<!-- Small size tooltip that is applied via data-bs-custom-class="tooltip-sm" -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-placement="top" data-bs-title="I'm a small tooltip">
  Small tooltip example
</button>
Top Customize