How to extend existing SASS bootstrap grid classes

Question

I am trying to make my code cleaner, so I have something like that

 <div class="col-sm-6 col-md-6">
                    <div class="feature-list-item">
                        <div class="feature-list-item__icon-container">
                            <i class="feature-list-item__icon fa fa-code"></i>
                        </div>
                        <div class="feature-list-item__description">
                            <h4 class="feature-list-item__description-title">Clean Code</h4>
                            <p class="feature-list-item__description-text"> Hello world</p>

                        </div> 
                    </div>
                </div>

As you may guess, I don't like this wrapper div - <div class="col-sm-6 col-md-6">

It is great idea to use it as layout according to the SMACSS rules.

So I want to create class for layout, for instance l-feature-list-item

And replace all these columns classes to make it look as following

 <div class="l-feature-list-item">
                    <div class="feature-list-item">
                        <div class="feature-list-item__icon-container">
                            <i class="feature-list-item__icon fa fa-code"></i>
                        </div>
                        <div class="feature-list-item__description">
                            <h4 class="feature-list-item__description-title">Clean Code</h4>
                            <p class="feature-list-item__description-text"> Hello world</p>

                        </div> 
                    </div>
                </div>

But in this case, I need to extend col-sm-6 col-md-6 classes from Bootstrap SASS sources

.l-feature-list-item {
   @extend .col-sm-6;
   @extend .col-md-6;
}

This is pseudo code.

So my question is how to organize my idea correctly. Using @import “../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap”; will make it output every single class from bootstrap sass sources that is undesirable behavior. I need import only dependencies and it would be grate if it was possible to @extend like placeholders.

I would be grateful for any help.

Are you sure you want to do that? Anyone who's familiar with Bootstrap can glance at `class="col-sm-6 col-md-6"` and know exactly what it is — Duderino9000, Aug 12 '16 at 04:09
What if I want to swap my grid system, in this case I need to change everything in my HTML, but mostly it will be complex PHP file. Thats why I want to encapsulate all this stuff — CROSP, Aug 12 '16 at 07:56
Yeah, but is it likely that you'll need/want to swap your grid system? Would generating a different grid (i.e. more columns) with the _grid.scss mixin help instead? — Duderino9000, Aug 12 '16 at 15:42

score 1 · Answer 1 · answered Oct 02 '20 at 10:49

Here's how it can be done when you need full Bootstrap, but with more grid sizes. It is important to import the Bootstrap variables first, do the changes, and import the rest of Bootstrap next. So, let's assume you have your style.scss:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
 
// extend bootstrap grid system
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1360px,
  xxxl: 1860px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1300px,
  xxxl: 1800px
);

@import '~bootstrap/scss/bootstrap';

// your code next

Carol Skelly · Answer 2 · 2021-04-20T13:59:27.167

0

In Bootstrap 4, the "bootstrap-grid" can be built separately from the rest of Bootstrap. Therefore you can use and extend only the grid classes like this...

@import "bootstrap-grid";

.l-feature-list-item {
   @extend .col-sm-6;
   @extend .col-md-6;
}

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

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

edited Apr 20 '21 at 13:59

answered Jun 01 '18 at 19:00

Carol Skelly

351,302
90
710
624

How to extend existing SASS bootstrap grid classes

2 Answers2

Linked