Bootstrapには標準で用意されているクラスがあるのでまとめてみました。
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-left
<div class="pull-left">...</div>
// Classes
.pull-left {
float: left !important;
}
// Usage as mixins
.element {
.pull-left();
}
pull-right
<div class="pull-right">...</div>// Classes
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-right();
}bootstrap4のfloat コンテンツの左・右寄せはこちら↓↓↓
blockコンテンツの中央寄せ
center-block
<div class="center-block">...</div>// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}bootstrap4のblockコンテンツの中央寄せはこちら↓↓↓
clearfix
clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}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">bootstrap4の画像はこちら↓↓↓
img-responsive
.img-responsiveでレスポンシブに画像を調節してくれます。
<img src="..." class="img-responsive" >