CODEWITHSUNDEEP
csstwitter-bootstrapflexboxbootstrap-4
MeltingDog
MeltingDog

Reputation: 15468

Bootstrap 4: How to apply flex only on small breakpoint?

I'd like to apply the d-flex class to my element only on small screens. Looking through the documentation (https://getbootstrap.com/docs/4.3/utilities/flex/) I cannot find a way to do this. I have tried d-sm-flex but that stil seems to be for small and up.

Would anyone know how to have flex work just for the sm breakpoint? Or would I have to write this myself?

My code if it matters:

       <ul class="nav d-sm-flex">
          <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
          <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
          <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
          <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
          <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
        </ul>

Upvotes: 5

Views: 3005

Answers (1)

Temani Afif
Temani Afif

Reputation: 273640

You need to add another one to override for the next breakpoint. In your case it's md so make it block again (the default one).

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="nav d-sm-flex d-md-block">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>

You can also remove the d-sm-flex since nav is already set as a flexbox container:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="nav d-md-block">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>

Upvotes: 7

Related Questions