By default, packs are displayed in a carousel. If you would prefer them to appear as standard pricing cards, in a grid alongside the rest of your pricing, you can change this with custom CSS.

From this:

To this:

1. Go to the Custom CSS section

You will find the CSS section in Settings > Widgets > Custom CSS. If you have not used this area before, see How to customise a bsport widget with custom CSS.

2. Select the Common tab

We recommend using the Common tab.

3. Paste the CSS

Paste the following rules into your custom CSS area:

/* ── CAROUSEL: DISABLE CAROUSEL BEHAVIOUR ─────────────────────────────────── */

.bs-carousel__indicator__container,
.bs-carousel__navigation__button,
.bs-initial-price__price {
  display: none;
}

.bs-carousel__items__indicator__container {
  overflow: hidden;
  contain: none;
  min-width: 0;
  pointer-events: none;
}

.bs-carousel__items__container {
  overflow: hidden;
  contain: none;
  min-width: 0;
  width: 100%;
}

.bs-carousel__items__container__view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 230px;
  gap: 20px;
  margin: 0;
  width: 100%;
  transform: none;
  transition: none;
  animation: none;
  translate: 0;
  will-change: unset;
  contain: none;
}

.bs-carousel__items__container__view[style*="transform"] {
  transform: none !important;
}

.bs-carousel__items__container__view > * {
  transform: none;
  transition: none;
  animation: none;
  opacity: 1;
  visibility: visible;
  display: block;
  position: static;
  margin-left: 0;
  width: auto;
  flex-shrink: 0;
}

.bs-carousel__item {
  position: static;
  transform: none;
  pointer-events: all;
}

.hidden-item-right,
.hidden-item-left {
  flex-basis: 0;
  translate: 0;
}

[id*=bsport-widget] .cleanslate .hidden-item-right,
[id*=bsport-widget] .cleanslate .hidden-item-left {
  translate: none;
}


/* ── CAROUSEL: GRID BREAKPOINTS ───────────────────────────────────────────── */

@media (width < 1475px) {
  .bs-carousel__items__container__view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 1100px) {
  .bs-carousel__items__container__view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 750px) {
  .bs-carousel__items__container__view {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
  }
}


/* ── CAROUSEL: CARD HEIGHTS ───────────────────────────────────────────────── */

.bs-carousel__item .bs-pack-card {
  height: 230px;
}

@media (width < 768px) {
  .bs-carousel__item {
    width: 100%;
    height: 160px;
  }
}

@media (width < 750px) {
  .bs-carousel__item .bs-pack-card {
    height: 175px;
  }

  .bs-pack-card {
    height: 175px;
  }

  .bs-carousel__item .bs-pack-card {
    height: 150px !important;
  }

  .bs-pack-card__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bs-carousel__items__indicator__container {
    padding: 0 10px;
  }

  .bs-grid-item-justification-space-between {
    height: 100%;
  }

  .bs-pack-card__prices-container {
    align-items: end;
  }
}


/* ── CAROUSEL: CARD STYLES ────────────────────────────────────────────────── */

.bs-pack-card .bs-generic-card__content {
  background: linear-gradient(
    120deg,
    var(--color-secondary-background-paper) 50%,
    var(--color-background-paper) 50%
  );
  border-radius: var(--border-radius-4);
}

.bs-pack-card__title {
  font-size: var(--h6-fontSize);
}

.bs-pack-card__description {
  -webkit-line-clamp: 2;
}

.bs-pack-card__prices-container {
  height: 100%;
  justify-content: end;
}


/* ── PASS PAGE: LAYOUT ────────────────────────────────────────────────────── */

.bs-pass-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  min-width: 0;
}

.bs-pass-page__carousel__container {
  display: flex;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
  margin: 0;
}

.bs-pass-page__list__filters__container {
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}

.bs-pass-page__payment__pack__list__container {
  min-width: 0;
  overflow: hidden;
}

.bs-pass-page__payment__pack__list__card__button {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.bs-paymentpack-card__grid {
  min-width: 0;
}


/* ── CAROUSEL CONTAINER: POINTER EVENTS ──────────────────────────────────── */

.bs-pass-page__carousel__container,
.bs-carousel__container,
.bs-carousel__items__container,
.bs-carousel__items__container__view,
.bs-carousel__item {
  pointer-events: none;
}

.bs-pack-card__footer > button,
.bs-button__container {
  pointer-events: all;
}


/* ── CAROUSEL CONTAINER ───────────────────────────────────────────────────── */

.bs-carousel__container {
  min-width: 0;
  width: 100%;
  flex: 1;
}


/* ── CAROUSEL CONTAINER: RESPONSIVE PADDING ──────────────────────────────── */

@container (width < 1100px) {
  .bs-carousel__item {
    flex-basis: 0;
  }

  .bs-pass-page__carousel__container {
    padding: 0 10px !important;
  }
}

@container (width < 450px) {
  .bs-pass-page__carousel__container {
    padding: var(--spacing-2);
  }
}


/* ── MISC ─────────────────────────────────────────────────────────────────── */

.bs-calendar-search__container,
.bs-search__container {
  margin-bottom: 0;
}

⚠️ If you want the packs to appear first, also add this rule:

.bs-pass-page__carousel__container {
  order: 0;
}

4. Save your changes

Once you have added your custom CSS rules, remember to save. Changes apply instantly.

Widget: How to display packs like the rest of pricing cards

1. Go to the Custom CSS section

2. Select the Common tab

3. Paste the CSS

4. Save your changes