I’m trying to create a responsive contact us section for a website I’m designing and coding for a local business, but the justify-content-center class from bootstrap v4.5 is not centering the icons in their container. The Bootstrap CSS doc is correctly linked, as is the JS at the bottom. I already have a working navbar, so that’s not the problem.
I save my work and refresh the browser, and I get this (I added a thin border so you can see the container):
justify-content-center malfunction
Here’s my code for that section so far:
<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-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
</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="0 0 16 16">
<path
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
</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"
viewBox="0 0 16 16">
<path
d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z" />
<path
d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
</svg></a>
</div>
</div>
</div>
I have a div with a container class followed by a div with a row class, just like it’s portrayed in the Bootstrap v4.5 docs:
Bootstrap v4.5 docs example
I’m not sure why I’m getting this error. Any ideas?
I have double and triple-checked my code against the Bootstrap v4.5 docs, but the Contact Us section icons will not center in their container. I tried other variations of the justify-content class such as justify-content-start and justify-content-around, but I got the same result. I suspected that it had something to do with the <svg> tags and their attributes, but when I replaced them with text inside of the anchor tags, I had the same problem.
0
You’re using bootstrap’s justify-content-center class to center the columns, but the icons inside each column are not centered within their respective columns. You need to add additional centering classes for the content within the columns.
<div class="container">
<h2 class="contact-header text-center">Contact Us</h2>
</div>
<div class="container-md">
<div class="row justify-content-center border">
<div class="col-4 d-flex justify-content-center align-items-center">
<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-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
</svg>
</a>
</div>
<div class="col-4 d-flex justify-content-center align-items-center">
<a href="mailto:" class="email">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
</svg>
</a>
</div>
<div class="col-4 d-flex justify-content-center align-items-center">
<a href="mailto:" class="schedule">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-calendar-event" viewBox="0 0 16 16">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z" />
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
</svg>
</a>
</div>
</div>
</div>
I added d-flex justify-content-center align-items-center to each column (col-4). Let me know if this resolves your issue.
2