Bootstrap4 - jumbotronクラスの角丸をなくす方法

Bootstrap4では、メインビジュアル（主に画像）用のコンポーネントとして jumbotronクラスがあります。

親要素の幅いっぱいに広がるエリアを作成できるため、 見た目にインパクトのある表示ができます。

但し、デフォルトではjumbotronクラスで表示したエリアや画像は、 下図のように「角丸」となっています。

ケースによっては「角丸」が不要な時もあると思います。

そこで、このページでは jumbotron クラスの「角丸」をなくす方法を2つ紹介します。

jumbotron-fluid クラスを使用する

jumbotron クラスではなく、jumbotron-fluid クラスを使用すると、 画面全幅でジャンボトロンが表示され、角丸もなくなります。

画面全幅でかつ「角丸」なし、がいい場合は jumbotron-fluid クラスがおすすめです。

jumbotron-fluid クラスを使うと、下図のように全幅で角丸もなく表示されます。

HTMLは次の通りです。 jumbotron-fluid クラスを使う場合は、外側にjumbotron jumbotron-fluid クラスを使用し、 containerクラスは内側で使用します。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Hello World</h1>
    <p>サンプルテキスト</p>
  </div>
</div>

カスタマイズ用CSSファイルで設定を再設定する

もう一つの方法は、カスタマイズ用CSSを用意して、 jumbotron クラスのスタイルを上書きする方法です。

jumbotron クラスはbootstrap4で次のようにスタイル設定されています。

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

ついでに、jumbotron-fluid クラスは次のようにスタイル設定されています。

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

jumbotronクラスの「角丸」をなくすには、 「border-radius」を 0 にすればOKです。

カスタマイズ用CSSファイルに次のように記述します。

.jumbotron {
	border-radius: 0;
}

これで角丸がなくなります。

HTMLは次の通りです。

<div class="container">
  <div class="jumbotron">
    <h1>Hello World</h1>
    <p>サンプルテキスト</p>
  </div>
</div>

まとめ

このように、２通りの方法で「角丸」をなくすことができます。

全幅がいいなら「jumbotron-fluid クラス」を使用します。

container クラスの中で jumbotron クラスを使用したい場合は、 カスタマイズ用CSSでスタイルの再設定をします。