3

Bootstrap 3 Multi-column within a single ul not floating properly is basically a question with answers covering bootstrap 3. I tried the solution in bootstrap 4 now and it mostly works but there are some things that do not look clean.

I made a jsfiddle to demonstrate the issue here with the following html-code:

<div class="col-12 container" style="height: 350px;">
  <ul class="list-unstyled row">
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
  </ul>
</div>

As you can see, the first and last item still have their round borders:

border issue

I tried to get around this by:

  • adding the border class to try and force a rectangular border (no effect)
  • using list-group-flush to remove the curved borders completely (lead to the first item missing the bar at the top and the last one missing the bar at the bottom resulting in another unclean look)
  • Using list-group-flush with a first and last class to manually add the missing borders (no effect; fiddle here)

I recently started with bootstrap and I am not super familiar with CSS so I wonder what I might be missing (can as well be something super obvious).

(Unsure whether that matters or not but the image above was taken and experiences gained in FF58 Windows 10)

geisterfurz007
  • 5,292
  • 5
  • 33
  • 54
  • so you're trying to keep the borders but remove the rounding, or remove the borders altogether? – willanderson Feb 14 '18 at 19:24
  • As long I have a list that looks "the same" and clean on all edges and ends of it (and has the columns) I am happy. Ideally I would keep the borders (first linked fiddle with the first and last items smoothed out) but if it is looking similar I won't complain either. Note: I also failed the link at first. I editted it a fwe minutes ago. – geisterfurz007 Feb 14 '18 at 19:26

1 Answers1

12

Bootstrap 4 doesn't seem to accommodate modifying a styled .list-group that way without writing your own custom css. You could start without borders/padding by changing .list-group-item to .list-item, and then add border classes and padding classes as you see fit

example https://jsfiddle.net/jqyq46v4/

willanderson
  • 1,458
  • 12
  • 13
  • That helped a lot! With `m-2 border` I think I should be pretty close to the list group styling. https://jsfiddle.net/vh0qe77s/4/ Maybe you can include that and I will be happy to accept your answer! – geisterfurz007 Feb 14 '18 at 19:42
  • woops yeah I used p-2 and wrote m-2. I should sleep longer. Again thanks for your quick help and time! – geisterfurz007 Feb 14 '18 at 19:49
  • no worries - for what it's worth you could use either or a combination of both – willanderson Feb 14 '18 at 19:56
  • The problem with the solution in the comments is that the borders double up, so they look twice as thick. Therefore, I followed the solution, but did `class="list-item list-group-item-action col-sm-4 p-3 border-right border-bottom` and then in the first three I also had `border-top` and every third I added `border-left` – Zachary Weixelbaum Jun 03 '19 at 13:36