I have a hard time centering the text inside a Bootstrap button. Here is what I tried
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
</div>The result is shown in picture:
Any tip on how to fix that?
Add style="text-align: center;" to the container div.
<div class="d-grid gap-2 col-6 mx-auto" style="text-align: center;">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
</div>
You can use a button that acts as a link instead.
<button class="btn btn-primary"
style="height: 200px; margin-bottom: 150px; font-size: 3rem; font-weight: bold;"
onclick="window.location.href = 'all-listings.html';">
Browse All Listings
</button>
Bootstrap buttons already have their text centered by default so you should be able to just apply the class btn btn-primary and it should do. No need to add anything else, just check that you're not overwriting the bootstrap styles with your own styles.
For more info check the documentation on the bootstrap website.
<a class="btn btn-primary text-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
