Twitter Bootstrap Question posted in

bootstrap 4: list-inline items for different breakpoints-Twitter bootstrap

how can I align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) with bootstrap display properties?

According to How to display a list inline using Twitter's Bootstrap I can use ‘list-inline’. Example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

This does work in general, but how does that work with respect to breakpoints? Usually, bootstrap allows to set the breakpoint in the notation, e.g. ‘d-sm-block’ (visible only on min-width: 576px), but the documentation doesn’t say anything about ‘list-inline’ in this regard.

Tags:

2

Answers


  1. 0

    As explained in the docs the Display classes work for any type of CSS display: value. There form d-sm-inline or d-sm-inline-block will also work.

    Login or Signup to reply.
  2. 0

    Bootstrap does not currently support list-inline as of v4.3 – it is merely a utility function across all breakpoints. I also do not see any signs of this being supported in future versions as the shiplist v4.4 in Github and onward has no references to this.

    In order to get what you’re looking for using only Bootstrap utilities, you would have to use the Display utility class d-{breakpoint}-inline-flex. The ml-{breakpoint}-{size} Spacing utility class can also be used for spacing purposes to continue supporting breakpoint behavioral adjustments.

    Open the snippet below in Full Page or Expand snippet mode to see the result:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<ul class="list-unstyled d-sm-inline-flex">
  <li>Lorem ipsum</li>
  <li class="ml-sm-3">Phasellus iaculis</li>
  <li class="ml-sm-3">Nulla volutpat</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search