Bootstrap 4 - show only the current breakpoint after the footer text (inline)-CodePudding

How can I show the current Bootstrap breakpoints just after the footer text (in the same line)?

This is different than just showing them via a <div> block. That one is easy using d-block.

What I see is that all visible breakpoints are shown, so for the 'sm' breakpoint I see both breakpoints like 'xs sm'. I just want to see the current breakpoint, so only 'sm'.

This is what I tried with similar approaches:

<body>
  <app-root class="mb-4"></app-root>
  <footer class="footer">Create by Me 
    <span class="d-inline-block d-sm-none">xs</span>
    <span class="d-none d-inline-block d-md-none">sm</span>
    <span class="d-none d-inline-block d-lg-none">md</span>
    <span class="d-none d-inline-block d-xl-none">lg</span>
    <span class="d-none d-inline-block">xl</span>
  </footer>
</body>

CodePudding user response：

d-inline-block overrides d-none. Therefore, it does not work. You need to use d-*-inline-block instead of d-inline-block for all the breakpoints except the xs, for example, d-sm-inline-block for the sm breackpoint.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<body>
  <app-root class="mb-4"></app-root>
  <footer class="footer">Create by Me
    <span class="d-inline-block d-sm-none">xs</span>
    <span class="d-none d-sm-inline-block d-md-none">sm</span>
    <span class="d-none d-md-inline-block d-lg-none">md</span>
    <span class="d-none d-lg-inline-block d-xl-none">lg</span>
    <span class="d-none d-xl-inline-block">xl</span>
  </footer>
</body>