bootstrap

bootstrap4のTooltipsをカスタマイズ。
https://getbootstrap.com/docs/4.3/components/tooltips/
JavaScriptでtemplate設定

Options
https://getbootstrap.com/docs/4.3/components/tooltips/#options
データ属性の場合はdata-のようにオプション名を追加。例「data-animation=”” 」

$(function () {
  $('[data-toggle="tooltip custom-tooltip"]').tooltip({
    template: '<div class="tooltip custom" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
    title: 'ツールチップの色変更'
  });
})

<a href="#" class="btn btn-outline-warning" data-toggle="tooltip custom-tooltip">ツールチップのカスタマイズ</a>

.custom {
  &.bs-tooltip-top .arrow::before,
  &.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: $white;
  }
  .tooltip-inner {
    background-color: $white;
    color: $gray-700;
  }
}

※scss、変数指定

bootstrapの「Progress」を五つ星（★★★★★）five star reviewにする。
https://getbootstrap.com/docs/4.3/components/progress/

★はsvg（background）にて表示
bootstrap4.3使用前提

HTML

<div class="progress fivestar">
  <div class="progress-bar progress-bar-star" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

SCSS

// function
@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}
@function bg-svg($string) {
  @return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}
// variable
$amber: #FFC107;
$gray-400: #BDBDBD;
// style
.progress.fivestar {
  background-image: bg-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polygon fill="' + $gray-400 + '" points="7.33 4.68 11.5 4.68 11.5 4.73 8.13 7.28 9.45 11.49 9.42 11.5 6 8.91 2.58 11.5 2.55 11.49 3.87 7.28 0.5 4.73 0.5 4.68 4.67 4.68 5.98 0.5 6.02 0.5 7.33 4.68"/></svg>');
  height: 1.2rem;
  width: 6rem;
  .progress-bar.progress-bar-star {
    background-image: bg-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polygon fill="' + $amber + '" points="7.33 4.68 11.5 4.68 11.5 4.73 8.13 7.28 9.45 11.49 9.42 11.5 6 8.91 2.58 11.5 2.55 11.49 3.87 7.28 0.5 4.73 0.5 4.68 4.67 4.68 5.98 0.5 6.02 0.5 7.33 4.68"/></svg>');
  }
}
.progress.fivestar,
.progress-bar.progress-bar-star {
  background-color: transparent;
  background-size: 1.2rem;
  background-repeat: repeat-x;
  border-radius: 0;
}

10px＝1remとする場合の
Bootstrap4.3『Responsive font sizes』機能を有効にして使う時の覚え書き。

10px＝1rem とするには、まずhtmlフォントサイズを62.5%と書くわけですが、レスポンシブフォントサイズ機能を使う場合、これはかなりマズイ・・ということで、おかしくならないようにしたい。

https://getbootstrap.com/docs/4.3/getting-started/theming/
Bootstrapのテーマやコンポーネントのカスタマイズはsass変数を使用。

☆ファイル構造は
https://getbootstrap.com/docs/4.3/getting-started/theming/#file-structure

☆bootstrapをインポートする方法
https://getbootstrap.com/docs/4.3/getting-started/theming/#importing
custom.scssを用意するか（ファイル名はcustomである必要はない）、
bootstrapのsassファイルのうち必要なファイルのみをインポートする。
※オススメは、必要なファイルのみインポート。
※bootstrapのコアファイルはなるべく弄らない。

たとえば、
@import “../node_modules/bootstrap/scss/reboot”;
↓
@import “reboot”;
インポート先のパスを変更したりも可能なので、自分が把握しやすい方法で書けばよいかと。

_reboot.scss（scss/ _reboot.scss）

html {
  font-size: 62.5%; // 追加 10px＝1rem
}

_variables.scss（scss/ _variables.scss）

$font-size-base: 1.6rem; // 書き換え

_rfs.scss（scss/vendor/ _rfs.scss）

$rfs-base-font-size: 1rem; // 書き換え
$rfs-rem-value: 10;  //書き換え