Tips for correctly aligning a button to the right of an svg image

I am struggling to align a logo and toggle button inline in the header of a sidebar.

Despite trying various techniques from Bootstrap 5 documentation and Stack Overflow, such as text-right, text-end, and float-right, I have not been successful in achieving the desired alignment.

How can I ensure that the toggle button is aligned to the right and remains static/sticky even when the screen resizes?

For a live demo, check out this JS FIDDLE LIVE DEMO.

Current result can be seen here: https://i.sstatic.net/BeGUf.png

Desired result is to have the logo and toggle button vertically aligned in the middle and horizontally to the right: https://i.sstatic.net/fWkbF.png

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To enhance your layout, consider including the justify-content-end property and utilizing a margin of mx-3. By making this adjustment to your code snippet, you will achieve the desired outcome.

              <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>

Answer №2

To achieve the desired layout, you can eliminate the .row and .col classes and utilize .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>

View on JSFiddle

Simply make the necessary adjustments to the logo placement post-collapse.

Answer №3

Two issues need to be addressed in your code:

  1. The viewbox size of your SVG is causing overflow due to being too large
  2. Using a 6-column layout on the logo wrapper div will not achieve the desired effect

To resolve these issues, it is recommended to remove the row and column classes from the logo and arrow wrapper divs. You can find an updated version of your code with custom CSS, new classes, and adjustments to the SVG's viewbox and x/y position here: 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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4

What is the best way to increase the size of this text when an image is hovered over?

I'm looking to make the .thumb_text element grow when hovering over the <img> within the li.thumb_list. Currently, I can only achieve this effect when hovering over the text itself, not the image. In addition, the text is inexplicably becoming ...

htmlcsshover

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

In my JavaScript code, I have a function that checks if an HTML paragraph element, 'el', is a certain size by comparing its scrollHeight and clientHeight properties: function isOverflow(element: string): boolean { const el = document.getEleme ...

javascripthtmltypescriptjestjsmocking

The input tag loses focus after its value is updated using a class method in Angular 8.x

Currently, I am working on integrating a credit card payment method and formatting its number through specific methods. Here is how it is done: HTML <div class="form-group" *ngFor="let formField of cardFields; let cardFieldIndex = index;"> ...

javascripthtmltypescriptinputangular8

Efficiently refine your search using the combination of checkboxes and dropdown menus simultaneously

I am currently in the process of creating a highly sortable and filterable image gallery that utilizes numerous tags. The inspiration for this project stems from a similar question on Stack Overflow regarding dropdown menus and checkboxes. You can view the ...

javascripthtmljquerycss

100% width with a pixel offset

In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px. Here's a rough illustration: ------------------------------- ...

csswidthpercentage

Special html effects for scrolling

Recently, I've been noticing a trend of websites incorporating new and innovative scrolling effects. One great example is: As you scroll down the page, the initial section stays fixed in place (z-index of 1?) while the content scrolls over it seamles ...

htmlcssfragment-identifier

Having trouble getting my ReactJS page to load properly

I am currently linked to my server using the command npm install -g http-server in my terminal, and everything seems to be working smoothly. I just want to confirm if my h1 tag is functional so that I can proceed with creating a practice website. I have a ...

javascripthtmlreactjs

What could the possible reason behind the malfunctioning of my prepared statements for the insert operation?

I recently discovered that using prepared statements is a more effective method than using deprecated ones. Despite my best efforts and online tutorials, I haven't had any luck getting this to work or finding the problem. That's why I'm her ...

phphtmlmysql

Exploring the origins of CSS through patch design

Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...

htmlcss

IE11 React application cannot recognize the <main> tag

When using my React application, I encountered the following error message in the dev console while using IE11: Warning: The tag <main> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase let ...

reactjshtmlinternet-explorer-11

VS code is showing the directory listing instead of serving the HTML file

Recently, I attempted to use nodejs to serve the Disp.html file by following a code snippet from a tutorial I found on YouTube. const http = require("http"); const fs = require("fs"); const fileContent = fs.readFileSync("Disp.html& ...

javascripthtmlnode.jsexpressweb-development-server

Basic PHP code for fetching outcomes

Looking to retrieve results from a website by utilizing a for loop to gather and compile them together. (Please note that it involves an ASP request which generates a webpage with specific parameters) I have drafted this code in attempt to achieve the de ...

phpasp.nethtml

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...

javascriptjquerycss

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

htmlreactjstypescriptaxioscomponents

I need to reposition the right column in Bootstrap5 to appear at the top in mobile view

Tried using order-first and order-last with two columns in a row. For mobile view, aiming to keep the left column below. ...

bootstrap-5

Issue with data type not refreshing in mySQL Workbench

I'm facing an issue with changing the datatype of my "first_name" column. I want it to be VARCHAR(45), but it's stuck at INT(11) as shown in the table diagram and connection provided below. https://i.sstatic.net/0CbkD.png https://i.sstatic.net/8 ...

phphtmlmysqlmysql-workbenchalter-table

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

jqueryhtmlajaxsynchronous

The dilemma between Nuxt Js global CSS and Local CSS

Currently, I am in the process of developing a Nuxt application utilizing an admin template. While I am well-versed in Vue.js, I am finding the aspect of loading assets within Nuxt.js to be a bit perplexing. I am in the process of converting the admin temp ...

javascriptcssvuejs2nuxt.js