How To Add Close Button To Bootstrap Card?

I have a bootstrap card using the following code:

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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="card card-outline-danger text-center"><spanclass="pull-right clickable close-icon"data-effect="fadeOut"><iclass="fa fa-times"></i></span><divclass="card-block"><blockquoteclass="card-blockquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <citetitle="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.

<divclass="container"><divid="closeablecard"class="card card-hover-shadow mt-4"><divclass="card-header bg-transparent border-bottom-0"><buttondata-dismiss="alert"data-target="#closeablecard"type="button"class="close"aria-label="Close"><spanaria-hidden="true">&times;</span></button></div><divclass="card-body mt-n5"><h5class="card-title">Your Title</h5><pclass="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><ahref="#"class="card-link">Card link</a><ahref="#"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.

See a Demo on JSFiddle...

HTH, hennson

Share