bootstrapのcontainer外の背景色を指定したい。

Question

bootstrapを使っています。

以上のサイトのようにbackground-colorを設定したいと考えています。

しかし、どうもかゆいところに手が届きません。

１、以下のコードの場合、すべての背景色がaquaになります。

<div class="container-fluid bg-color-aqua">
            <div class="container">
                <div class="col-sm-6">
                    <p class="h2">・・・</p>
                </div>
                    <div class="col-sm-6">
                        <p class="h2">・・・</p>
                    </div>
            </div>
        </div>

2、以下のコードの場合、左はaquaで、右はwhiteになるのですが、右のcontainer部分のみがwhiteになるだけで、container外はaquaになってしまいます。

<div class="container-fluid bg-color-aqua">
            <div class="container">
                <div class="col-sm-6 ">
                    <p class="h2">・・・</p>
                </div>
                    <div class="col-sm-6 bg-color-white">
                        <p class="h2">・・・</p>
                    </div>
            </div>
        </div>

3、以下のコードの場合、背景色を分けれますがcontainerの中に留まるため、左全画面がaquaになるわけではなく、白の部分が残ります。

<div class="container-fluid">
            <div class="container">
                <div class="col-sm-6 bg-color-aqua">
                    <p class="h2">・・・</p>
                </div>
                    <div class="col-sm-6 bg-color-white">
                        <p class="h2">・・・</p>
                    </div>
            </div>
        </div>

要するに、containerの外側の背景色を指定したいです。

bootstrapを使い、サイトの左の背景色は全面aqua、右の背景色は全面whiteと分けたいですが、どうすればよろしいでしょうか？
できればサンプルコード付きで回答いただけるとありがたいです。

Answer 1

.container-fluidに左半分だけ色のついた背景色を設定すれば良いのではないでしょうか？

.continer-fluid{
	background: -webkit-linear-gradient(left,aqua 50%, #fff 50%);
	background: linear-gradient(to right,aqua 50%, #fff 50%);
}

bootstrapで用意されているスタイルではないので、
カスタム用のCSSでうまいこと上書きしてやれば良いかと。

Comments

[takumi123]

回答いただきありがとうございます。

実際に試したのですが、デスクトップの場合は想像通りできたのですが、タブレット・スマホ表示になっても２つに分かれたままでした。

１列になったときは、縦で分かれるようにしたいのですが、いろいろ試行錯誤してみてもなかなかできません。

よければ何かヒントをいただけないでしょうか？

[aKusano]

オリジナルのスタイルになるので、bootstrapと同じブレイクポイントで一列用のスタイルになるように自分でCSSを書きましょう。

その際、bootstrapのclassをそのまま使ってしまうと他のコンポーネントに影響が出ますので、独自classを追加してそちらでコントロールするのがよろしいかと。

Answer 2

真似したいサイトのHTMLソースは見てみましたか？
もしbootstrapを使っているのであれば、cssやhtmlで参考にできる部分があると思います。

containerはpaddingやmarginの設定がcssにあったので、背景の白が出ているのだと思います。
ただのdivを使って以下はどうでしょうか。(縦並びで白が出てしまいますが)

    <div class="row">
        <div class="col-sm-6 bg-color-aqua">
            <p class="h2">・・・</p>
        </div>
        <div class="col-sm-6 bg-color-magenta">
            <p class="h2">・・・</p>
        </div>
    </div>

Comments

[takumi123]

回答いただきありがとうございます。

Khan Academyのサイトですが、ソースを見てもbootstrapではない感じでした。
bootstrapを使っているので、できるだけbootstrapで無理なく実現したいと考えています。

ただ、参考にできる部分はあるので活用したいと思います。
アドバイスありがとうございます。