Bootstrap 5 Card for Rent Car Website

The following is an example of a Card component in the implementation of displaying fleet information for a car rental website.

Toyota All New Avanza

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam temporibus, vel quas impedit inventore autem.

Rp.
399.000,-
per 6 - 12 hours
Capacity 7 pax

Toyota Hiace Commuter

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis dolores dolorum, saepe quisquam distinctio molestias.

Rp.
799.000,-
per 6 - 12 hours
Capacity 15 pax

Mitsubishi Pajero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam qui omnis officia dicta perferendis voluptatem.

Rp.
1.299.000,-
per 6 - 12 hours
Capacity 7 pax
close

Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Basic
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>
Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

Dismissible popover 
<a tabindex="0" class="btn btn-lg btn-info" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-original-title="Dismissible popover">Dismissible popover</a>
Four Directions

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" data-bs-original-title="" title="">
    Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover" data-bs-original-title="" title="">
    Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" data-bs-original-title="" title="">
    Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover" data-bs-original-title="" title="">
    Popover on left
</button>