Define different number of Bootstrap 4 columns for some part (div) of page only?

Question

By default Bootstrap 4 has 12 columns. It is possible to change the number of columns by (https://getbootstrap.com/docs/4.0/getting-started/theming/) creating custom.scss file and SASS-compiling it into css file that will replace the default Bootstrap css file. It can be done by overriding variables:

$grid-gutter-width: 14px;
$grid-columns: 24;

This works for the entire page. But I have some region of the page with completely different structure. Is it possible to define distinct number of Bootstrap columns for some region only?

Answer 1

The easiest way to create 24 columns across each row is to use the auto-layout grid explained in my answer here.

However, if you need a complete 24-column grid with all of the responsive breakpoints...

Option 1

One option is to create a custom SASS @mixin (very similar to the Bootstrap 4 make-grid-columns mixin). Notice in the mixin that I used .col24- instead of .col-...

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

@mixin make-custom-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  %grid-column {
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @for $i from 1 through $columns {
      .col24#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      .col24#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .col24#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
      }

      @for $i from 1 through $columns {
        .col24#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }
    }
    
  }
  
}


@include make-custom-grid-columns(24, 10px, $grid-breakpoints);


/* remember to import Bootstrap after the changes */ 
@import "bootstrap";

This allows the standard 12 unit grid (.col-*) to co-exist with the 24 unit grid (col24-*) so you can use either as needed.

Demo: https://codeply.com/go/GFkzKlFyX2

Option 2

Another option is to extend a custom container (ie:container-24) class for the the 24 column grid. This would allow you to simply use container-24 for the custom grid, and the row, col-* would remain the conventional (col-{breakpoint}-1 .. col-{breakpoint}-24)...

.container-24 {
    @include make-container();
    @include make-container-max-widths($container-24-max-widths, $grid-breakpoints);

    /*  custom cols- 24 column grid with 6px gutter */
    @include make-grid-columns(24, 6px, $grid-breakpoints);
}

Demo: https://codeply.com/go/Adfnwh9p4x

---

IMO, the auto-layout grid is the simpler option as this custom build will add a lot of extra "weight" to the CSS.

---

Related: How to extend/modify (customize) Bootstrap 4 with SASS

Answer 2

You can create 24-columns grid using the auto-layout columns Or, you can generate a custom CSS builder by changing the $grid-columns variable to 24.

<div class="row">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
      .....
    </div>
    <div class="col">
        24
    </div>