'How do I display buttons in list items in a horizontal row?

When I add a category as admin it will update with this code and display the categories that are currently in the database. However, I can't seem to align them next to each other.

@foreach ($categories as $category)
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-10 mb-5 text-center">
      <li><a class="btn btn-dark mt-auto" href="#">{{$category->category_name}}</a></li>
    </div>
  </div>
</div>
@endforeach

1

csstwitter-bootstrap


Solution 1:[1]

Your primary issue, aside from the faulty list structure, is that you're repeating containers. You should be repeating list items.

Then, use Bootstrap's inline list class to arrange list items horizontally.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-10 mb-5 text-center">
      <ul class="list-inline">
        @foreach ($categories as $category)
        <li><a class="btn btn-dark mt-auto" href="#">{{$category->category_name}}</a></li>
        @endforeach
      </ul>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood

Related Questions