Customizing Bootstrap 4 CSS

Customizing Bootstrap 4 css

While there is not an "official" Bootstrap 4 customizer like there was in 3.x, there are several tools that can do this. These all convert from SASS to CSS, and some provide a UI if you're not familiar with SASS.

Themestr.app Customizer

Bootply Customizer

Also see this answer for details on how to customize with CSS overrides or SASS.

How to Customize Bootstrap 4

https://v4-alpha.getbootstrap.com/about/license/

Read the first couple Lines. Bootstrap has an MIT open source license. you can find more on that here. https://en.wikipedia.org/wiki/MIT_License

You can copy and paste the code that you want however you must keep the Copyright title intact for the pieces that you use from bootstrap.

changing css in bootstrap 4 to customize website

Using your same imports I don't see Bootstrap's CSS having any paddings on the section tag, the styles you defined are applying correctly, maybe it's a different stylesheet that's causing this?

Also note you are importing Bootstrap CSS twice, and maybe for different versions of it? Try deleting the import you are not using. In fact, try deleting one css import at a time to see when the problem goes away, that'll at least help you find which stylesheet is overriding your styles

section {  padding: 9rem 0;}

<head>  <!--there is some more here but not nessecary-->  <!-- Bootstrap core CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <!-- Custom fonts for this template -->  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <!--icons-->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head><section class="bg-primary text-white mb-0" id="about">  <div class="container">    <h2 class="text-center text-uppercase text-white">About</h2>    <hr class=" mb-5">    <div class="row">      <p class="lead">some text...</p>      <p class="lead">some text...</p>    </div>    <div class="text-center mt-4">      <a class="btn btn-xl btn-outline-light" href="#">        <i class="fas fa-download mr-2"></i> Download Now!      </a>    </div>  </div></section>

Sass difficulty creating custom build of Bootstrap 4

You got it partially right by using @import "bootstrap" at the very end.

What wasn't correct was @importing functions, variables, and mixins at the very top when @import bootstrap.scss already contains the @imports for them.

What's essentially happening here is that your @import "mixins" at the top of your file only sees what came before it (the default functions and variables file) and that was before you provided your own values further down.

custom.scss

$newcolor: #00a89c;

$colors: (
    "newcolor": $newcolor
);

$primary: $newcolor;

$theme-colors: (
    "primary": $primary
);

@import "bootstrap";

How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?

You can make a custom mixin to regenerate the appropriate breakpoint columns inside the custom container...

@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

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

    // only override lg and up
    @include media-breakpoint-up('lg', $breakpoints) {
      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          padding-right: ($gutter / 2);
          padding-left: ($gutter / 2);
          @include make-col($i, $columns);
        }
      }

    }
  }
}

@import "bootstrap";

$foreground-container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1428px
);

/* make the container for the custom grid */
.foreground-container > .container {
    @include make-container();
    @include make-container-max-widths($foreground-container-max-widths, $grid-breakpoints);
}

.foreground-container {
    /*  custom col for all breakpoints */
    @include make-grid-columns(6, 3px, $grid-breakpoints);

    /* override lg and up using custom mixin */
    @include make-grid-columns-custom(15, 6px, $grid-breakpoints);
}

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

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

customize bootstrap 4 cdn

The problem is that the selector isn't specific enough. Have a look at the following.

<html>  <head>  <!-- Required meta tags -->  <meta charset="utf-8">      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  <style>    .navbar-dark .navbar-nav .nav-link.active.active {      color: red;    }    </style>

  </head>
  <body>      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">          <a class="navbar-brand" href="#">HTUDelta</a>          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">              <span class="navbar-toggler-icon"></span>          </button>          <div class="collapse navbar-collapse" id="navbarSupportedContent">              <ul class="navbar-nav mr-auto">                  <li class="nav-item">                      <a class="nav-link active" href="#">Home                          <span class="sr-only">(current)</span>                      </a>                  </li>                  <li class="nav-item active">                      <a class="nav-link" href="#">Users only                          <span class="sr-only">Users only</span>                      </a>                  </li>                  <li class="nav-item active">                      <a class="nav-link" href="#">Featchers                          <span class="sr-only">Upcoming</span>                      </a>                  </li>              </ul>              <ul class="navbar-nav ml-auto">                  <li class="nav-item dropdown">                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"                          aria-expanded="false">Dropdown </a>                      <div class="dropdown-menu" aria-labelledby="colourBlindDropDown">                          <a class="dropdown-item" href="?colour=Trichromacy&set=true">Trichromacy</a>                          <a class="dropdown-item" href="?colour=Deuteranomaly&set=true">Deuteranomaly</a>                          <a class="dropdown-item" href="?colour=Protanomaly&set=true">Protanomaly</a>                          <a class="dropdown-item" href="?colour=Tritanomaly&set=true">Tritanomaly</a>                          <a class="dropdown-item" href="?colour=Monochromaticy&set=true">Monochromaticy</a>                          <div class="dropdown-divider"></div>                      </div>                  </li>              </ul>              <form class="form-inline my-2 my-lg-0">                  <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Username">                  <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="password">                  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>              </form>          </div>      </nav>      <!-- Optional JavaScript -->      <!-- jQuery first, then Popper.js, then Bootstrap JS -->      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body></html>

How to change the bootstrap primary color?

Bootstrap 5 (update 2021)

The method is still the same for Bootstrap 5.

https://codeply.com/p/iauLPArGqE

Bootstrap 4

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...

$primary: purple;
$danger: red;

@import "bootstrap";

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

In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

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

Also see: this answer, this answer or changing the button color in (CSS or SASS)

It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.

Customizing Bootstrap 4 CSS