This code snippet should solve the issue:
.logo-container a.btn {
left: calc(100% + 50px);
white-space: nowrap;
}
/* Additional CSS for reference */
.logo-container {
min-height: 10rem;
margin-top: 2rem;
background-color: #f5f5f5;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid d-flex justify-content-center align-items-center logo-container">
<div class="position-relative d-flex align-items-center">
<img src="https://picsum.photos/150/50">
<a href="#" class="btn btn-secondary position-absolute">How to buy</a>
</div>
<div>
In summary, wrapping the logo with position:relative and applying position:absolute to the button will achieve the desired result. Using Bootstrap's flex utility helps center the button vertically.
The button's positioning is adjusted using left: calc(100% + 50px), where you can replace 50px with your preferred fixed pixel amount as mentioned.
A custom class .logo-container is added to the container for targeted styling without affecting other elements. Feel free to customize this class as needed.
If avoiding custom selectors is preferred, an alternative could be:
.container-fluid > .position-relative img + a.btn-secondary.position-absolute {
left: calc(100% + 50px);
}
While longer, this selector is more specific. Alternatively, adding a unique ID to the button could also be used for targeting purposes.