Modals
CSS-only modal dialogs using the :target selector.
Open Modal
<a href="#demo-modal" class="btn btn-primary">Open Modal</a>
<div id="demo-modal" class="modal">
<div class="modal-content">
<h3>Modal Title</h3>
<p>This is a CSS-only modal dialog.</p>
<a href="#" class="btn btn-primary float-right">Close</a>
<a href="#" class="modal-close">×</a>
</div>
</div>
[Add javascript code to close the modal by clicking outside the modal]Dropdowns
CSS-only dropdown menus using hidden checkboxes.
<div class="dropdown">
<input type="checkbox" id="dropdown-basic" class="d-none">
<label for="dropdown-basic" class="btn btn-secondary">Dropdown <span aria-hidden="true">▾</span></label>
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>Tooltips
Simple tooltips using data attributes and pseudo-elements. Available in different positions and styles.
Basic Tooltip
<button class="btn btn-primary" data-tooltip="This is a basic tooltip">
Hover me
</button>Tooltip Positions
<button data-tooltip="Top tooltip" data-tooltip-position="top">Top</button>
<button data-tooltip="Right tooltip" data-tooltip-position="right">Right</button>
<button data-tooltip="Bottom tooltip" data-tooltip-position="bottom">Bottom</button>
<button data-tooltip="Left tooltip" data-tooltip-position="left">Left</button>Accordion
Click the button to expand the content.
This is the content of the first accordion item.
This is the content of the second accordion item.
This is the content of the third accordion item.
<div class="accordion">
<input type="checkbox" class="accordion-toggle d-none" id="accordion-1">
<label for="accordion-1">Accordion Item 1</label>
<div class="accordion-content">
<p>This is the content of the first accordion item.</p>
<p>This is the content of the second accordion item.</p>
<p>This is the content of the third accordion item.</p>
</div>
</div>