How to add close button to bootstrap card?

user_7259670 0
Viewed 28220

I have a bootstrap card using the following code: 

 <div class="card card-outline-danger text-center">
         <span class="pull-right clickable" 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>

I am using the following code to get my close button working: 

<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span>

The close button is not working and I am new to bootstrap. Therefore, I need some help.

twitter-bootstrap-3 twitter-bootstrap css html
2 Answers

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">&times;</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.

See a Demo on JSFiddle...

HTH,
hennson

user_8479380
Related