Bootstrapテンプレートにメインコンテンツを追加する

今回の追加する要素

下記のような3カラムのコンテンツを追加します。

 

追加方法

PC用には3カラム表示で、スマートデバイスには1カラムで表示を行います。
今回はポイントだけ説明させていただきますので、ソースコードをGithubからダウンロードするか、サンプルサイトより閲覧いただければと思います。

1. 3カラムの適用について
   3カラムで表示を行うにはBootstrapのGridシステムを利用します。
   下記のソースが3カラム表示を行っている箇所になります。
    

   <div class="row">
     <div class="col-sm-4">
         <!--1カラム目-->
     </div>
     <div class="col-sm-4">
         <!--2カラム目-->
     </div>
     <div class="col-sm-4">
         <!--3カラム目-->
     </div>
   </div>
   

   Bootstrapは、全部で12になるように設定します。今回は均等に3等分していますので「"col-sm-4"」クラスを追加しています。
   2カラムで均等にする場合は、「"clo-sm-6"」になります。詳細はBootstrapのGridシステムを参照ください。
    

2. イメージ画像の丸に表示

   css3のborder-radiusプロパティを使用します。

   border-radius: 50%;

ソースコードダウンロード

今回ブログで紹介しています、Bootstrapの記事ですが、折角ですのでダウンロードできるようにGithubにアップロードしました。
ご自由に使用していただければと思います。

https://github.com/abechiyo/bootstrap-basic

サンプルサイト

関連記事

BootstrapのイケテないNavbarにスタイル適用。センターリング(justified)などについて

Bootstrapにメインビジュアルを追加する