CODEWITHSUNDEEP
bootstrap-4
klewis
klewis

Reputation: 8360

How can we make list-group horizontal with Bootstrap 4

With Bootstrap 4, the list-group component is very rich with design aesthetics, such as with borders, background colors, rounded corners, etc..

With my following list...

<ul class="list-inline">
  <li class="list-inline-item align-top">item 1</li>
  <li class="list-inline-item align-top">item 2</li>
  <li class="list-inline-item align-top">item 3</li>
  <li class="list-inline-item align-top">item 4</li>
</ul>

...how can I make it look fancy like the following....

<ul class="list-group">
  <li class="list-group-item">item 1</li>
  <li class="list-group-item">item 2</li>
  <li class="list-group-item">item 3</li>
  <li class="list-group-item">item 4</li>
</ul>

...and still keep it horizontal.

Upvotes: 2

Views: 12392

Answers (2)

Shidersz
Shidersz

Reputation: 17190

One approach would be using classes d-flex and flex-row on the list-group. If you want the items to stack on smaller screen, you can use the breakpoint classes of bootstrap (SM, MD, LG, **XL*). For example: flex-sm-row

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<ul class="list-group flex-sm-row">
  <li class="list-group-item">item 1</li>
  <li class="list-group-item">item 2</li>
  <li class="list-group-item">item 3</li>
  <li class="list-group-item">item 4</li>
</ul>

Upvotes: 2

IvanS95
IvanS95

Reputation: 5742

So the options you have to get it done involve overriding the styles in the classes with other classes, or using a different component that looks more like what you need like Button Group here you can see what I mean.

In the case you use flex-row to change the direction of the list-group, you would have to adjust the borders of each item so it looks as you need. In this case the list-group will flex horizontally on larger screens, but stack on smaller ones

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

<ul class="list-group flex-md-row">
  <li class="list-group-item">item 1</li>
  <li class="list-group-item">item 2</li>
  <li class="list-group-item">item 3</li>
  <li class="list-group-item">item 4</li>
</ul>

<div class="btn-group rounded border" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-link">Left</button>
  <button type="button" class="btn btn-link">Middle</button>
  <button type="button" class="btn btn-link">Right</button>
</div>

Upvotes: 4

Related Questions