My goal is to design a button using Bootstrap 5 that has a unique appearance.
I came across a similar post on Stack Overflow but couldn't find a solution that fits my needs.
This is the HTML code I attempted:
<button type="button" class="btn btn-dark btn-lg download-button text-wrap">
<table>
<tr>
<td>
<i class="fab fa-apple"></i>
</td>
<td>
<span style="font-size: 10px; margin-bottom:none;"> Download on the
</span><br>
<span style="font-size: 15px; margin-top: none;"> App Store
</span>
</td>
</tr>
</table>
</button>.download-button {
margin: 5% 3% 5% 0;
white-space: normal !important;
word-break: normal;
word-wrap: break-word;
}The current output doesn't meet my expectations:
The button's height is greater than desired, and there is too much space between the first and second lines of text.
I would appreciate any assistance!