Bootstrap3に用意されているクラス

Bootstrap3には標準で用意されているクラスがあるのでまとめてみました。

目次

text-align テキストの左・中央・右寄せ

text-left

左寄せテキスト

<p class="text-left">左寄せテキスト</p>

text-center

中央寄せテキスト

<p class="text-center">中央寄せテキスト</p>

text-right

右寄せテキスト

<p class="text-right">右寄せテキスト</p>

floatコンテンツの左・右寄せ

pull-lef

<div class="pull-left">...</div>
.pull-left {
  float: left !important;
}

pull-right

<div class="pull-right">...</div>
.pull-right {
  float: right !important;
}

blockコンテンツの中央寄せ

center-block]

<div class="center-block">...</div>
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

clearfix

clearfix

<div class="clearfix">...</div>

ul li リスト

list-unstyled

  • リスト1
  • リスト2
  • リスト3
<ul class="list-unstyled">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

list-inline

  • リスト1
  • リスト2
  • リスト3
<ul class="list-inline">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

画像

img-rounded

<img src="..." alt="..." class="img-rounded">

img-circle

<img src="..." alt="..." class="img-circle">

img-thumbnail

<img src="..." alt="..." class="img-thumbnail">

img-responsive

.img-responsiveでレスポンシブに画像を調節してくれます。

imgsample
<img src="..." class="img-responsive" >
  • URLをコピーしました!
目次