How to stop text overlapping icon and keep text vertically centered when wrapping, using Bootstrap 5-CodePudding

Using Bootstrap 5 button code with horizontally and vertically centered text and a right aligned icon with multiple buttons in a flex box situation, how do I stop the button text overlapping the icon when it wraps, keep the icon vertically centered when the button text wraps, and keep the button text vertically center aligned when it wraps?

You can see whole code with the wrapping and overlapping issues in this fiddle by moving the center column with your mouse and making the display area bigger and smaller.

.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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<a href="#" target="_blank" >This Section<img src="https://svgshare.com/i/fPK.svg"  /></a>

CodePudding user response：

I'd go with a full flex (inline-flex) layout. Part of the problem is that some of your custom style rules were being overwritten by Bootstrap. I've added a second class to the selectors to increase 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<a href="#" target="_blank" >
  <span>This Section</span>
  <img src="https://svgshare.com/i/fPK.svg"  />
</a>

<a href="#" target="_blank" >
  <span>This<br>Section</span>
  <img src="https://svgshare.com/i/fPK.svg"  />
</a>

CodePudding user response：

There are other ways to accomplish this but I think following changes will get you what you are after.

Increase .custom-btn left/right padding to a larger number (Ex. 2.2rem) to clear the arrow and use flex properties to center the text vertically and horizontally:

.custom-btn, .custom-btn:visited {
  position: relative;
  padding: 1.5rem 2.2rem; /* Increase left/right padding */
  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;
  /* Add flex properties */
  display: flex;  
  align-items: center;
  justify-content: center;
}

Here is a working jsfiddle forked from OP's fiddle: jsfiddle.net/fd8ru69h