Bootstrap flex container shifts content when inserting SVG

Question

I have a flex container with inline elements. In this example everything is vertically-aligned properly...

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
<header class="py-5 border-bottom" style="background-color: #f2ce4f;">
  <div class="container d-flex flex-wrap justify-content-center">
    <a href="/" class="d-flex align-items-center mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg> <span class="fs-4">Page Title</span> </a>
    <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg>
    <div class="col-md-4">
      <a href="/" class="btn btn-success btn-lg btn-block btn-huge px-4 py-4" style="font-weight: bold;">Button</a>
    </div>
  </div>
</header>

When I replace the span with an SVG however, suddenly the contents shift and everything becomes unaligned...

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <header class="py-5 border-bottom" style="background-color: #f2ce4f;">
      <div class="container d-flex flex-wrap justify-content-center">
        <a href="/" class="d-flex align-items-center mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg> <svg width="200" height="120"><rect x="10" y="10" width="200" height="100" fill="#198754" /></svg> </a>
        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg>
        <div class="col-md-4">
          <a href="/" class="btn btn-success btn-lg btn-block btn-huge px-4 py-4" style="font-weight: bold;">Button</a>
        </div>
      </div>
    </header>

KIKO Software · Accepted Answer · 2025-09-03 14:43:17Z

Well, it is literally doing what you ask of it. The button is only 80 pixels high, but your SVG starts 10 pixels down and it is 120 pixels high. So it shows what your code tells it to.

Now we don't have a really good idea what you were expecting. I can correct it, make it look aligned, but is this what you want? Or did you want the right button to move down as well?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <header class="py-5 border-bottom" style="background-color: #f2ce4f;">
      <div class="container d-flex flex-wrap justify-content-center">
        <a href="/" class="d-flex align-items-center mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg> <svg width="200" height="80"><rect x="0" y="0" width="200" height="100" fill="#198754" /></svg> </a>
        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg>
        <div class="col-md-4">
          <a href="/" class="btn btn-success btn-lg btn-block btn-huge px-4 py-4" style="font-weight: bold;">Button</a>
        </div>
      </div>
    </header>

I also noticed that the right button is in a Bootstrap column. whereas the left SVG isn't in a column. This code looks strange....

Collectives™ on Stack Overflow

Bootstrap flex container shifts content when inserting SVG

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related