Bootstrap によるレスポンシブ Web デザイン

ボーダーを設定する

ここでは幅と高さを指定した div 要素を配置して，その要素にボーダー（枠線）を入れてみます．まずは枠線のない要素を配置します．

index.html（抜粋）コピー
<div style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>

ボーダーは class="border" で追加できます．薄い色で枠線が追加されたことを確認できます．

index.html（抜粋）コピー
<div class="border" style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>

ボーダーの色はテーマに合わせて選ぶことができます．たとえば class="border-primary" を指定します．（詳細はこちら）

index.html（抜粋）コピー
<div class="border border-primary" style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>

ボーダーの幅を変更します．たとえば border-3" や border-5" を指定します．（詳細はこちら）

index.html（抜粋）コピー
<div class="border border-3" style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>
<div class="border border-5" style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>

ボーダーの角を丸くします．たとえば rounded や rounded-5 を指定します．このとき，2個目は文字とボーダーが重なってしまいました．3個目は padding を指定して文字とボーダーが重ならないようにしています．（詳細はこちら）

index.html（抜粋）コピー
<div class="border border-3 rounded" style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>
<div class="border border-3 rounded-5" style="width:300px; height:100px; margin-bottom:5px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>
<div class="border border-3 rounded-5" style="width:300px; height:100px; margin-bottom:5px; padding:10px;">
  幅300px, 高さ100px の箱の中に文字列を配置
</div>

目次に戻る