Bootstrap: No Border Bottom in Accordion First Item

[ismailfarooq]

There is no Border Bottom if Accordion has only single Item

https://www.bootply.com/vB8GoWkFz3

[royklutman]

I believe it is technically not an accordion when using just a single item, you can fix this by just using the collapse class without the accordion: https://www.bootply.com/wpXTWhpi7V

[Ruffio]

@royklutman, your solution/example isn't 100% bulletproof. If you look closely (zoom in), you can easily see a double border at the bottom:

However I can see this has already been raised as an issue: https://github.com/twbs/bootstrap/issues/27108

I'm sure that the fix is quite small and it would be cool if it was corrected in 4.2 :-)

[royklutman]

@Ruffio You are correct indeed, didn't notice that. I do have a possible fix for this, i'm discussing this in #27108 so it's not scattered all over the place.

[ismailfarooq]

@royklutman Actually my accordion is dynamic items can b single or multiple

[royklutman]

@ismailfarooq Ah, that makes sense. If you are using plain CSS, add these lines:

.accordion .card {
  overflow: hidden;
}

.accordion .card-header {
  margin-bottom: -1px;
}

If you are using SCSS and build Bootstrap yourself, add this to your custom SCSS:

.accordion {
  .card {
    overflow: hidden;
  }

  .card-header {
    margin-bottom: -1px;
  }
}

This will fix your issue, the proposed fix is in PR #27133.

[JrmSK]

Found a solution on my own.
I was facing this issue, coupled with an other challenge: on the same page i am displaying a few different accordions, some might be 1 item long, some more. So I had to find a trick to select only the ones with one child. I got help from this article: https://css-tricks.com/almanac/selectors/o/only-child/

the rest is pretty straightforward, you just need to add a css rule:

.accordion div.card:only-child { border-bottom: 1px solid rgba(0, 0, 0, 0.125); border-radius: calc(0.25rem - 1px); }