How To Add Close Button To Bootstrap Card?
Solution 1:
This isn't a standard feature of bootstrap, so you need to bind a JS click event to the icon, and trigger it to close the parent .card. I also added cursor: pointer to the icon so that it looks like something you can click on.
$('.close-icon').on('click',function() {
$(this).closest('.card').fadeOut();
}).close-icon {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card card-outline-danger text-center">
<span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Solution 2:
Ok, some time passed since this question was raised, but still a nice way to realize a dismissible card without any custom JavaScript and only with Bootstrap CSS classes is the following: the combination of card-header, the Bootstrap 4 Close Icon and negative margins (here .mt-n5) on the card-body. The close icon gets nicely positioned within the card-header and the negative margins pull the card content closer into the header area.
<div class="container">
<div id="closeablecard" class="card card-hover-shadow mt-4">
<div class="card-header bg-transparent border-bottom-0">
<button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body mt-n5">
<h5 class="card-title">Your Title</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab.
</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
To actually close the card we can make use of the BS4 Data-API and put the the following data attributes in the button tag: data-dismiss="alert" data-target="#closeablecard".
data-target is the ID of our card and data-dismiss=alert triggers the actual close event in Bootstrap.
HTH,
hennson
Post a Comment for "How To Add Close Button To Bootstrap Card?"