Changing gutter width on specific elements bootstrap 4 mixin

Question

How can I change the gutter width on specific elements using mixins? I have looked through many tutorials but I haven't seen exactly what I'm looking for.

here's my code:

<div class="row" id="gallery">
            <div class="col">
                <div class="row">
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                </div>

                <p>See more on <a href="#">Instagram</a></p>
            </div>
        </div>

I need to change the gutter width to 7.5px on .gal_col. I have made a variable in my variables.scss:

$new_gutter_width: 7.5px;

But I don't get how to use it exactly. Would I use something like

.gal_col{
    @include make-col($new_gutter_width);
}

I'm probably totally wrong but hopefully you can help

Zim · Accepted Answer · 2021-05-19T14:43:40.533

4

Bootstrap 5 (update 2021)

Bootstrap 5 has new gutter classes that enable you to change the column gutter for an entire row.

Bootstrap 4 (original answer)

Do you have to use a SASS mixin? It could be done with CSS...

.row > .gal_col {
   padding-right: 7.5px;
   padding-left: 7.5px;
}

I don't think a mixin in Bootstrap exists for this. The mixin that's used to create columns (make-grid-columns) only sets the gutter on .col*.

or, if you want to use SASS you can @extend the .col class like this...

.gal_col {
    @extend .col;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

https://codeply.com/go/KtO3O9Geg5

Notice too that the negative margins of 15px on the .row may also need to be adjusted so that the outer columns align evenly to the left/right:

.gal_col_row {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

Related: Customizing Bootstrap CSS template

edited May 19 '21 at 14:43

answered Mar 15 '18 at 15:46

Zim

329,487
83
671
600

No I guess not. But it is something I'd like to learn to do. Thanks – Reece Mar 15 '18 at 15:48
So could I set the gutter on .gal_col if I just change it to .col* or is this still impossible? – Reece Mar 15 '18 at 15:56
No, by `.col*` I meant wildcard as in all the columns, col-12 col-9 col-10 so it's not possible to define a new column definition and different gutter for just `.gal_col` using the mixin. – Zim Mar 15 '18 at 16:03
I added another option with SASS @extend – Zim Mar 15 '18 at 16:09

Changing gutter width on specific elements bootstrap 4 mixin

1 Answers1