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/bootstrap@5.1.3/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>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
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/bootstrap@5.1.3/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>