sass - Bootstrap 5 - losing column class functionality when using row-cols() mixin

Question

I have been working with the v5 beta of Bootstrap, and have been running into an issue where I lose functionality of the column classes when trying to use the row-cols() mixin that is referred to here. The example in the documentation is as follows:

You can also use the accompanying Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

I apply this example to the .row class like so:

.row {
  @include row-cols(4);

  @include media-breakpoint-up(md) {
    @include row-cols(8);
  }

  @include media-breakpoint-up(lg) {
    @include row-cols(12);
  }
}

In theory, this should work just like adding the regular bootstrap .row-cols-* class to the row div like so:

<div class="row row-cols-4 row-cols-md-8 row-cols-lg-12">
  <div class="col-6"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  <div class="col"><div style="width:100%; background: #ccc; height: 2.4rem;"></div></div>
  </div>
</div>

Instead, however, after using the row-cols() mixin on the .row class, I lose the ability to set any child content to span the width of more than one column. In the above 12-column example, each column is only 1 column wide, despite the 'col-6' class being on one of the columns.

SO My question is this: Am I applying the row-cols() mixin to the wrong element? What am I doing wrong where the functionality is not the same as the .row-cols-* class?

question from:https://stackoverflow.com/questions/65557678/bootstrap-5-losing-column-class-functionality-when-using-row-cols-mixin

Answer 1

You just need to use "col" class with your column classes. For example, "col col-6" instead of just "col-6", then you are able use column classes functionality.