How to properly right align a button next to an svg image-CodePudding

I have a sidebar with a header. I would like to have a logo toggle button inline in the header.

For some reason I can't align properly the button.

What I've tried according to the bootstrap 5 docs and some SO answers:

text-right

text-end

float-right

None of them worked.

How can I align the toggle button to the right and prevent it from changing position if the screen resizes (how to make it static / sticky)?

Desired result (vertically aligned in the middle and horizontally in the right):

CodePudding user response：

You should add justify-content-end and margin mx-3 change your code snippet to this one and everything will be fine

              <div class="col d-flex align-items-center justify-content-end mx-3">
                    <button type="button" id="sidebarCollapse" class="btn btn-light float-right">
                    <i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
                    </button>
                </div>

CodePudding user response：

You could remove the .row and .col classes and use .justify-content-between:

<div class="d-flex justify-content-between align-items-center">
    <div">
        <svg id="logoSvg" width="218" height="84" xmlns="http://www.w3.org/2000/svg">
            <g>
                <title>Layer 1</title>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="49.75" x="39.32813" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
            </g>
        </svg>
    </div>
    <div>
        <button type="button" id="sidebarCollapse" class="btn btn-light float-right">
            <i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
        </button>
    </div>
</div>

See on JSFiddle

You just need to change/remove the logo after collapse.

CodePudding user response：

There are 2 problems here:

The viewbox size of your SVG is way too big and is causing overflow
You will not get the desired effect using a 6-column on the logo wrapper div

I would suggest to remove the row and column classes from the logo and arrow wrapper divs. Here's an updated version of your code where I have added custom CSS, new classes and updated the SVG's viewbox x/y position: https://jsfiddle.net/bomsqn0r/8/

Updated SVG:

<svg id="logoSvg" width="140" height="28" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Layer 1</title>
        <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="24" x="0" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
    </g>
</svg>

Updated HTML:

<div class="logo-arrow-container">
    <div class="logo-container">
        <svg id="logoSvg" width="140" height="28" xmlns="http://www.w3.org/2000/svg">
            <g>
                <title>Layer 1</title>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="24" x="0" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
            </g>
        </svg>
    </div>
    <div class="arrow-container">
        <button type="button" id="sidebarCollapse" class="btn btn-light float-right">
        <i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
        </button>
    </div>
</div>

Added CSS:

.logo-arrow-container {
    display: flex;
    align-items: center;
}
.logo-container {
    margin: 0 auto;
}
.arrow-container {
    margin-right: 15px;
}