accordion Bottom border is zero by default

Bug description:

I am using simple Accordion form your package. I noticed bottom border for accordion is by default 0. All nested elements like cards inherit the same property so they also dont show bottom border

My HTML looks like this

<div class="mt-4">
<ngb-accordion #acc="ngbAccordion">
  <ngb-panel title="{{category}}" *ngFor="let category of categories">
    <ng-template ngbPanelContent>
      <div class="container">
        <div class="row">
          <div class="col-md-4" *ngFor="let menuItem of menuItems">
            <div class="card mb-5 box-shadow">
              <img class="card-img-top" [src]="images[0]" alt="Card image cap">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-plus-minus btn-number" (click)="onMinusClick(menuItem)">
                            <i class="fa fa-minus"></i>
                        </button>
                    </span>
                    <input [(ngModel)]="menuItem.quantity" class="form-control input-number" value="0" min="0" max="100">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-plus-minus btn-number" (click)="onPlusClick(menuItem)">
                            <i class="fa fa-plus"></i>
                        </button>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </ngb-panel>
</ngb-accordion>
</div>

<div class="mt-4 mb-4 text-center">
  <button class="btn btn-secondary" (click)="checkout()">Checkout</button>
</div>

When I load the page, the following pic shows the initial state

card-bottom-border-absent

I tried to some tricks in Chrome debugger and found one way to get those absent borders back. Its visible in pic:

card-bottom-border-present

Angular: 5.2.9

ng-bootstrap: 1.1.2

Bootstrap: 4.1.0

4 thoughts on “accordion Bottom border is zero by default

  1. This was not solved in 4.3. Bootstrap.css still contains

    .accordion > .card:first-of-type {
      border-bottom: 0;
    

    Looks like a single card in an accordion. I ran also into this issue.
    I’ve create a pull request for preventing border-bottom in this situation.
    ps. HTML in original post must be rebuild to contain .card children directly under .accordion.

  2. 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); }