Bootstrap: List group flush, first item still has top border

[milosa]

The manual shows that the first item doesn't have a top border.
This piece is supposed to remove it.

But in this example it has a border:
https://codepen.io/anon/pen/NBgYNo

[milosa]

It turns out, the SCSS is converted into this:

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0; }

When I try this, it works as expected:

.list-group-flush .list-group-item:first-child {
  border-top: 0; }

[mdo]

This is by design, though I imagine the docs could be clearer. When you place this in a .card, the expectation is that you'll want a border at the top to separate the previous bit of content.

[helmut]

This one caught me as well. In one component the border was there, and then for some unknown reason in another component it was gone! It makes sense now @mdo that you explained it. Thanks! For what it's worth, I'd be inclined to let people add the top border manually. It's not hard to just put a .border-top on the list group when you have content above it.

[dalemoore]

This is confusing to me, too. The example at https://getbootstrap.com/docs/4.1/components/list-group/#flush clearly shows that adding classes of list-group and list-group-flush to an unordered list, even when it's not in a card (as it isn't in that example), should remove the first-child's top border and the last-child's bottom border. But it doesn't on a live site, it only removes the last-child's bottom border. I can't figure out why this is when the HTML is structurally the same.

When I inspect the list-group-items in the docs, the first-child has this on it:

.list-group-flush:first-child .list-group-item:first-child { border-top: 0; }

But on my site, that is not being added at all.

Here's the exact code output by Drupal:

<ul class="list-group list-group-flush mb-4">
      <li class="list-group-item">  
          <a href="/cemetery-design-silk-floral-headstone-saddle-workshop-spring-2019">Cemetery Design, Silk Floral Headstone Saddle Workshop Spring 2019</a>    
          <p class="date mb-0"><span class="date-display-range">April 2, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/easter-floral-basket-arrangement-workshop-spring-2019">Easter Floral Basket Arrangement Workshop Spring 2019</a>    
          <p class="date mb-0"><span class="date-display-range">April 17, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/floral-design-demonstration-and-hands-workshop-spring-2019">Floral Design Demonstration and Hands-On Workshop Spring 2019</a>    
          <p class="date mb-0"><span class="date-display-range">March 7, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/inspiring-designers-demonstration-featuring-pat-diehl-scace-exhibit-designer-missouri-botanical">Inspiring Designers Demonstration featuring Pat Diehl Scace, Exhibit Designer, Missouri Botanical Garden, St. Louis</a>    
          <p class="date mb-0"><span class="date-display-range">March 8, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/kids-camp-floral-design-workshop-summer-2019">Kids Camp in Floral Design Workshop Summer 2019</a>    
          <p class="date mb-0"><span class="date-display-range">June 13, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/make-mommy-mother%E2%80%99s-day-arrangement-workshop-spring-2019">Make Mommy a Mother’s Day Arrangement Workshop Spring 2019</a>    
          <p class="date mb-0"><span class="date-display-range">May 11, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/master-floral-designer-spring-2019">Master Floral Designer Spring 2019</a>    
          <p class="date mb-0"><span class="date-display-single">January 10, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/terrarium-workshop-summer-2019">Terrarium Workshop Summer 2019</a>    
          <p class="date mb-0"><span class="date-display-range">June 18, 2019</span></p>  </li>
      <li class="list-group-item">  
          <a href="/wedding-floral-design-workshop-spring-2019">Wedding Floral Design Workshop Spring 2019</a>    
          <p class="date mb-0"><span class="date-display-range">February 19 - 21, 2019</span></p></li>
</ul>

There is an unwanted border added to the top, but the last border is removed as intended. There doesn't seem to be any other classes that handle adding borders between list items like this when you don't want the surrounding borders.

Edit: Okay, actually I get now why it's happening, because on my site the unordered list isn't the first-child of its parent element. Still, though, I think this should be more generic.

[philmayfield]

I ran into this today as well. Just wanted to throw in my two cents that it the top border on the first li when the parent is not the first child feels wrong given the intent of the modifier class.

That being said an easy workaround is to wrap the ul in a div, but that feels a little wasteful.

[XhmikosR]

PRs welcome to clarify the docs.

[kvlsrg]

We really need this top border? As for me it is not clear in case e.g. if some <p> is above:

[milosa]

I just fixed it with some custom CSS.

.list-group-flush li:first-child { border-top: none; }

[kvlsrg]

@milosa Yes, thanks. But my point here is to ask if this behavior is really expected.

[xsrvmy]

Here is another example DOM that causes this issue, using Angular 7, without cards:

<div _ngcontent-c1="" class="list-group list-group-flush"><!--bindings={
  "ng-reflect-ng-for-of": "0"
}--><button _ngcontent-c1="" app-todo-list-item="" class="list-group-item list-group-item-action" _nghost-c2="" ng-reflect-todo-key="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!---->Hi<!--bindings={
  "ng-reflect-ng-if": "false"
}--><button _ngcontent-c2="" class="close"> ×
</button></button></div>

[itunc1980]

When the .list-group-flush class is added in the List groups, the top line of the first element of the list is still displayed. When I look at the Boostrap.css document

[Before]
Line: 5503
.list-group-flush: first-child .list-group-item: first-child {
  border-top: 0;
}
After adding a comma after .list-group-flush: first-child, the problem is fixing.

[After]
.list-group-flush:first-child, .list-group-item:first-child {
border-top: 0;
}

[MartijnCuppens]

Closed by https://github.com/twbs/bootstrap/pull/30497
See https://codepen.io/MartijnCuppens/pen/ExVPXqB