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.