Menu
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.
548
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
Add a close button using HTML, CSS, and JavaScriptCreate a button element in your creative using a <div> tag. Create the element in the HTML file and style it in the CSS file. Then assign the ID close-btn to your element.
As a pure CSS solution for the close or 'times' symbol you can use the ISO code with the content property. I often use this for :after or :before pseudo selectors. The content code is \00d7. You can then style and position the pseudo selector in any way you want.
btn-close-white class.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
