I'm currently working on creating a responsive contact section for a website I'm developing for a small local company. Unfortunately, the icons in their container are not being centered despite using the justify-content-center class from Bootstrap v4.5. The CSS and JS files from Bootstrap are properly linked, and there are no issues with the navbar which is already functional.
After saving my work and refreshing the browser, I am seeing this (I added a thin border around the container to highlight the issue):
justify-content-center malfunction
This is the code I have implemented so far for that particular section:
<div class="container">
<h2 class="contact-header">Contact Us</h2>
</div>
<div class="container-md">
<div class="row justify-content-center border">
<div class="col-4">
<a class="phone" href="tel:"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
class="bi bi-telephone" viewBox="0 0 16 16">
<path
d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.450l1.034-1.034a.678.678 0 0 0-.063-1.015l-29.307-1.794a.680.680 0 0 0-.580-.122l-2.190.547a1.750 1.750 0 0 1-1.657-.459L5.482 8.062a1.750 1.750 0 0 1-.490-1.627l.548-2.190a.680.680 0 0 0-.122-.580zM1.884.511a1.745 1.74!-- other content here -->
</svg></a>
</div>
<div class="col-4">
<a href="mailto:" class="email"><svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor" class="bi bi-envelope" viewBox=-- other content here -->
</svg></a>
</div>
<div class="col-4">
<a href="mailto:" class="schedule"><svg
xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-calendar-event"
- other content here -->
</svg></a>
</div>
</div>
</div>
I have followed the structure of having a div with class "container" followed by a div with class "row", similar to the example shown in the Bootstrap v4.5 documentation:
Despite reviewing my code multiple times against the Bootstrap v4.5 documentation, I am still unable to center the icons in the Contact Us section. I have experimented with other variations of the justify-content class like justify-content-start and justify-content-around to no avail. At one point, I suspected the issue might be related to the <svg> tags and their attributes, but even after replacing them with plain text inside the anchor tags, the problem persisted.