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

2015年6月20日2023年9月30日

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

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

左寄せテキスト

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

中央寄せテキスト

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

右寄せテキスト

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

<div class="pull-left">...</div>

.pull-left {
  float: left !important;
}

<div class="pull-right">...</div>

.pull-right {
  float: right !important;
}

<div class="center-block">...</div>

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

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

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

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

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

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

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

<img src="..." class="img-responsive" >