簡単!Bootstrap3によるカードデザインレイアウト

カードデザインとは、カードのような四角形を並べたスタイルのデザインです。Pintarestを初め、twitterなど有名なWebサイトでよく見かけるスタイルです。

Bootstrap4では初めからカードデザインのコンポーネントが用意されていますが、Bootstrap3では用意されていないので、自作する必要があります。

そこでBootstrap3でも簡単に出来るカードデザインのサンプルを紹介します。

今回は例として3種類ご紹介します。

①写真付きカードデザイン

枠の中に写真と文章を入れるタイプです。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら


②アバター&写真付きカードデザイン

写真の真ん中にアバター写真又はアイコン画像を入れるタイプです。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら


③円の中の数字と線でステップを表すパターン

アイコン画像を中央に入れるタイプです。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら