A callout message is often positioned on a page to notify the user about something special.
Check basic example of callout use .callout
class with .card
.
You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.
Continue working LogoutYou have been gone for a while, we will log you out in 4m 15s.
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<h4>Session expiring</h4>
<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span> unless you continue session to stay signed in.</p>
<a href="#" class="btn btn-block btn-primary">Continue working</a>
<a href="#" class="btn btn-block btn-link">Logout</a>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<span class="fs-7"><span class="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span>.</p>
</div>
</div>
</div>
</div>
Use .close-over
class with .callout
.
You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.
Continue working
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card close-over">
<img class="card-img-top img-fluid" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<span class="fs-7"><span class="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span> unless you continue session to stay signed in.</p>
<a href="#" class="btn btn-block btn-primary">Continue working</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="callout card text-center close-over">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<img class="img-fluid d-inline-block w-70p mb-3" src="dist/img/empty-2.png" alt="empty2">
<h5>We use third-party cookies in order to personalize your site experience</h5>
<div class="d-flex justify-content-center mt-4">
<a href="#" class="btn btn-primary me-2">Allow</a>
<a href="#" class="btn btn-primary">Block</a>
</div>
</div>
</div>
</div>
</div>
Use .callout-dark
class with .callout
class.
You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.
Continue working
<div class="callout callout-dark card bg-violet-light-1">
<div class="card-body">
<button type="button" class="card-close btn-close btn-close-white">
<span aria-hidden="true">×</span>
</button>
<span class="fs-7">*sponsored</span>
<h4>Session expiring</h4>
<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span> unless you continue session to stay signed in.</p>
<a href="#" class="btn btn-block btn-white">Continue working</a>
</div>
</div>
Use .callout-floating
class with .callout
and direction classes liketop-end,top-start
.
<div class="callout callout-floating top-end card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating bottom-end card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating top-start card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating bottom-start card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating bottom-center card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating top-center card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
Class | Values |
---|---|
class="callout callout-floating [value]" |
top-center / top-start / top-end / bottom-center / bottom-end / bottom-start |