I am using bootstrap to conditionally display content only on larger devices. It works, but there is an issue:
<a class="navbar-brand p-0" href="#"><img src="images/logo.png" alt=""><span class="d-none d-md-block">My strapline<span></a>
The problem – the span content now aligns under the logo, rather than next to it without the "d-none d-md-block" class attributes.
How do I get the span content to stay inline with the logo?
Thank you
>Solution :
You can add the class "d-inline-block" to the span element to make it an inline-block level element and keep the span content inline with the logo.
<a class="navbar-brand p-0" href="#">
<img src="images/logo.png" alt="">
<span class="d-none d-md-inline-block">My strapline<span>
</a>
This will keep the span content inline with the logo on devices with medium or larger screen sizes (viewports width >= 768px), and hide the span content on smaller devices with viewports width < 768px.