WEB制作 シュマリ管理人 景品表示法に基づく表記：当サイトのコンテンツには商品プロモーションが含まれています。

Bootstrap4で5分割する方法【5カラム】

通常、Bootstrapは12分割のレイアウトを使用しますので、5等分したデザインは作成できません。（offsetで左右に余白を設ける等をすれば可能ですが）

そこで、Bootstrap的なcssを作成し、慣れた感覚で5列のレイアウトを実装可能にしようと思います。

5等分レイアウトのサンプルコード

html

<div class="container">
    <div class="row">
        <div class="col-xs-15">1</div>
        <div class="col-xs-15">2</div>
        <div class="col-xs-15">3</div>
        <div class="col-xs-15">4</div>
        <div class="col-xs-15">5</div>
    </div>
</div>

css

/* 5 Columns */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
Ｂｏｏｔｓｔｒａｐ４フロントエンド開発の教科書 ウェブ開発の知識とコツをしっかりマスター /技術評論社/宮本麻矢
posted with カエレバ
楽天市場
Amazon
駿河屋スタッフ募集中

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業（イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲）をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。

NEW POSTこのライターの最新記事