As I work on designing web sites, I often face challenges. One of my go-to tools is bootstrap, especially when creating card elements.
Here is the code I typically use for creating cards:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-12">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>While working on these cards, I wanted to add a [close] button in line with the <h3> tag. I tried various methods, but couldn't achieve the desired result. Can you help me with this?
After receiving some assistance, I transformed the button into an icon using the following code:
<div class="row mb-2">
<div class="col-md-12">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<h3 class="card-title d-flex justify-content-between w-100">
Special title treatment
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
The close icon is currently positioned at the bottom of the line. How can I move the close icon to the top of the line instead?