Bootstrap4ではボタンやカードなど色々なコンポーネント（パーツ）が用意されています。
今回は、その中でもよく使うコンポーネントをいくつか紹介いたします。

Jumbotron

JumbotronはWebサイトのファーストビューに表示されるような、サイトメッセージなどの重要なコンテンツを掲載します。

例：

<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>

結果：（サンプルを開く）

「.jumbotron」は、左右の余白を含みますが、「.jumbotron .jumbotron-fluid"」を指定すると、余白0の画面100%表示されます。

ボタン

例：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

結果：

ボタンは、<button>タグの代わりに、<a>タグ、<input>タグを使うこともできます。

例：

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

結果：

ボタンサイズ

• .btn-lg : 大きいサイズ
• .btn-sm : 小さいサイズ

例：

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary btn-sm">Large button</button>

結果：

• .btn-block : 横幅100%のボタン

例：

<button type="button" class="btn btn-primary btn-block">Large button</button>

結果： ボタン

ボタンの状態

• .active : アクティブなときにボタンが押されたように見せます
• .disabled : ボタンの無効状態

通常 active disabled

Methods

• $().button('toggle')：Activeなどの状態を切り替えます。
• $().button('dispose')：要素を破棄します。

例：

<button href="#" class="btn btn-primary" id="methods-test">Toogle</button>
<button href="#" class="btn btn-primary" id="methods-test2" role="button" data-toggle="buttons">Dispose</button>
<script>
// ActiveをToggleする
$("#methods-test").click(function(){
$(this).button('toggle');
});

// data-toggleを削除
$("#methods-test2").click(function(){
$(this).button('dispose').removeAttr('data-toggle');
});
</script>

結果：
Toogle Dispose

パンくずリスト

現在のページが、どの階層に位置するかを示します。

例：

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

結果：

セパレータの変更

セパレータを変更するにはCSSでスタイルを上書きするか、SCSSを修正することで変更できます。
SCSSは、_variables.scss の $breadcrumb-dividerを変更ください。

CSS:

<style>
.breadcrumb-item+.breadcrumb-item::before {
/* 記号 */
content: ">";
/* SVGアイコン */
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
/* なし */
content: "";
}
</style>

今回紹介したコンポーネント以外にも様々なコンポーネントが用意されています。
基本コピー&ペーストで使えますので、ご自身で確認ください。
https://getbootstrap.com/docs/4.1/components/alerts/