0

how to really override bootstrap variables? I try this one and not working

// overrides.scss
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

@import 'variables.scss'; // my own variables
$grid-columns: 12;
$grid-gutter-width: 16px;
@import '~bootstrap/scss/bootstrap.scss';

// global styles
@import 'overrides.scss';
@import '~bootstrap/scss/bootstrap.scss';

I'm using Angular 2+ and just want to set the gutter width of row from 30px to 16px, any solution to this?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Primawan Damarjati
  • 115
  • 3
  • 11

1 Answers1

0

There's no reason to import Bootstrap twice. Just import it once at the end...

@import 'bootstrap/functions';
@import 'bootstrap/variables';

$grid-columns: 12;
$grid-gutter-width: 16px;

@import 'bootstrap';

Demo: https://www.codeply.com/go/wSyODZFc0b

ReSedano
  • 4,970
  • 2
  • 18
  • 31
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624