Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text wraps, and maintain vertical center alignment for the button text upon wrapping?

To see the code example with wrapping and overlapping issues, please visit this fiddle and adjust the display area size.

.custom-btn,
.custom-btn:visited {
  position: relative;
  padding: 1.5rem 0.5rem;
  margin: 0.5rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 0;
  line-height: 1.2rem;
  background-color: #c1c1c1;
  border-color: #c1c1c1;
  flex: 33%;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box;
  letter-spacing: 0.8px;
  height: 70px;
}

.custom-btn:active,
.custom-btn:hover {
  background-color: #7d7c7c;
  border-color: #787878;
  text-transform: uppercase;
  color: #fff;
}

.icon-arrow-new {
  position: absolute;
  right: 10px;
  width: 22px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c534c51">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<a href="#" target="_blank" class="btn custom-btn">This Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>

javascripthtmlcssbootstrap-5

Answer №1

If you're looking to achieve this outcome, there are various methods that can be used. However, implementing the following modifications should help you reach your desired result.

To clear the arrow and align the text both vertically and horizontally, consider increasing the left/right padding of .custom-btn to a larger value (e.g. 2.2rem) and utilize flex properties:

.custom-btn, .custom-btn:visited {
  position: relative;
  padding: 1.5rem 2.2rem; /* Adjust left/right padding accordingly */
  margin: 0.5rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 0;
  line-height: 1.2rem;
  background-color: #c1c1c1;
  border-color: #c1c1c1;
  flex: 33%;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box;
  letter-spacing: 0.8px;
  /* Enable flex properties */
  display: flex;  
  align-items: center;
  justify-content: center;
}

You can view a functional jsfiddle based on the original fiddle by visiting: jsfiddle.net/fd8ru69h

Answer №2

If you're looking for a solution, I recommend using a full flex (inline-flex) layout. The issue was that some of your custom style rules were being overridden by Bootstrap. To solve this, I included a second class in the selectors to boost their specificity.

.btn.custom-btn,
.btn.custom-btn:visited {
  display: inline-flex;
  align-items: center;
  flex: 33%;
  position: relative;
  padding: 1.5rem 0.5rem;
  margin: 0.5rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 0;
  background-color: #c1c1c1;
  border-color: #c1c1c1;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box;
  letter-spacing: 0.8px;
  height: 70px;
}

.btn.custom-btn:active,
.btn.custom-btn:hover {
  background-color: #7d7c7c;
  border-color: #787878;
  text-transform: uppercase;
  color: #fff;
}

.icon-arrow-new {
  width: 22px;
  margin-left: 8px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3ecf3ee">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<a href="#" target="_blank" class="btn custom-btn">
  <span>This Section</span>
  <img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" />
</a>

<a href="#" target="_blank" class="btn custom-btn">
  <span>This<br>Section</span>
  <img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" />
</a>

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

Getting the chosen option from a dropdown list mapped in ReactJS

I am working on a dropdown select option that is linked to the data of an array object called 'template_titles'. Currently, the value in the dropdown corresponds to the title in the object. My goal is to be able to extract and use the selected va ...

javascripthtmlreactjs

Steps to have index.html display when running the build command in a Svelte project:

Greetings everyone, I'm brand new to using Svelte and have a question that's been on my mind. I recently developed a small app in Svelte that works perfectly fine during development. However, when I run npm run build for production, the output ...

javascriptnpmsvelte

What is the purpose of uploading the TypeScript declaration file to DefinitelyTyped for a JavaScript library?

After releasing two JavaScript libraries on npm, users have requested TypeScript type definitions for both. Despite not using TypeScript myself and having no plans to rewrite the libraries in TypeScript, I am interested in adding the type definition files ...

javascripttypescriptnpmtypescript-typingsdefinitelytyped

Demystifying Vertical Alignment: Everything You Need to Know

Struggling with vertical alignments has proven to be more complicated than expected. Despite reading numerous resources on stackexchange, a common understanding of the process remains elusive. After gathering some guidelines, it turns out that vertical-al ...

htmlcssvertical-alignment

Is there a more efficient method for iterating through this object?

Working with JSON and JS var data = { "countries": { "europe" : [{name: "England", abbr: "en"}, {name: "Spain", abbr: "es"}], "americas" : [{name: "United States"}], "asia" : [{name: "China"}] } }; JavaScript Loop for (k in data) { fo ...

javascriptjqueryjson

Revealing a detailed image upon hovering

<body> <div id="content" > <img id="Image1" src = "img.png" /> </div> </body> I am looking to implement a functionality where a close image appears on the top right corner when hovering over another image, specifically I ...

jquerycsshover

Programming in Python often involves utilizing a combination of powerful libraries such as BeautifulSoup,

I am currently developing a program that is designed to extract emails and collect specific links from them, particularly those from Newegg. I have successfully used iMAP to log in and access the HTML content of the emails. However, I am encountering an is ...

pythonhtmlbeautifulsouppython-requestsimap

What is the most effective method to prevent the auto-complete drop-down from repeating the same value multiple times?

My search form utilizes AJAX to query the database for similar results as the user types, displaying them in a datalist. However, I encountered an issue where it would keep appending matches that had already been found. For example: User types: "d" Datali ...

javascriptajaxautocompletehtml-datalist

Is it possible to determine the outcome of a JavaScript function using Python?

I am currently in the process of creating a web crawler. Extracting links from HTML is simple, but finding links that are generated by JavaScript proves to be more challenging for me. Is there a way to access the JavaScript output in order to determine w ...

javascriptpythondjangourllibpyjamas

Transforming an array of strings into a Name/Value object using JavaScript

Recently, I encountered a Web Service that sends an array of strings to the client. My goal is to transform this array into an object where each string has a name for future reference. Let's start with: var result = ["test", "hello", "goodbye"]; An ...

javascriptjquery

Ensuring the Selection with jQuery

I've successfully implemented jQuery validation on a text field, but when I try to apply it to a radio button, it doesn't seem to work. I'm not sure what I'm doing wrong. Here is my HTML and jQuery code: <input type="text" placehol ...

jqueryhtml

displaying 'undefined' upon completion of iterating through a JSON file using $.each

For my project, I am attempting to extract only the date data from a JSON object. I have successfully looped through the object and displayed it, but the issue arises at the end of the loop where it shows undefined. I am not sure what mistake I am making. ...

javascriptjqueryjsonajax

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Summary: Here is the desired end result shown in the image below. Alternatively, you can refer to the JSFiddle. Ideally, only CSS should be used without changing the DOM structure. The icons need to be aligned completely to the right using the .pull-right ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Having trouble finishing the npm installation process

Having trouble with completing 'npm install'. Can someone please assist me?</p> <pre><code>Encountering a warning about an old lockfile while running npm install. The package-lock.json file was created with an outdated version o ...

javascriptnode.jsnpm

What are the different kinds of properties that can be used in Vue.js

When working with Javascript, I can create arrays that hold different types of data elements like: var ex = ['name', 12, true]; console.log(ex); In Vue JS, when defining props for a component within a single file template, I have the option to ...

javascriptvue.js

Is your blockui overlay failing to cover the entire page?

I have implemented blockui to display a "Wait ... loading" popup on my webpage. It is mostly working fine, but I am facing a small issue where the overlay does not cover the entire width of the scroll window when I scroll right (although it covers the full ...

javascriptjqueryasp.net

jquery toggle for partial visibility not functioning properly

Can jquery sliding functions be used to partially show and hide content? In this scenario, there is a list with 7 items but only the first two are visible initially, while the rest are hidden. The goal is to have all 7 items show when the user clicks to v ...

javascriptjqueryhtmlcss

Update the image source within a CSS element

I'm facing an issue with changing the source image of an Element. The situation is that I have a customized CSS script and I need to modify a logo image. Below, you can find the source code: https://i.stack.imgur.com/8HLCE.png The problem lies in at ...

htmlcssimagesrc

A guide to setting defaultValue dynamically in React Hook Form

Presently, I am facing an issue with editing the Product page. The props values are fetched through an API and sent from the parent component. However, I am struggling to set this value to my Datepicker input. This is because the defaultValue function from ...

javascriptreactjsreact-hook-form

How can I utilize VeeValidate 3's locale message JSON files without the need for Node.js or an HTTP server?

With VeeValidate 2, the locale message files are in javascript format, making it possible to use them by including <script src='./vee-validate/dist/locale/ja.js'> without needing Node.js or an Http Server. However, with VeeValidate 3, the ...

javascriptvue.jslocalizationbootstrap-vuevee-validate