1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Reece
  • 2,581
  • 10
  • 42
  • 90

1 Answers1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624