とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > カラー

テキストカラー

.text-primary, .text-secondary, .text-success, .text-danger 等はコンテキストに応じたテキストの色を指定します。

Sample
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
Code
<div class="text-primary">.text-primary</div>
<div class="text-secondary">.text-secondary</div>
<div class="text-success">.text-success</div>
<div class="text-danger">.text-danger</div>
<div class="text-warning">.text-warning</div>
<div class="text-info">.text-info</div>
<div class="text-light bg-dark">.text-light</div>
<div class="text-dark">.text-dark</div>
<div class="text-body">.text-body</div>
<div class="text-muted">.text-muted</div>
<div class="text-white bg-dark">.text-white</div>
<div class="text-black-50">.text-black-50</div>
<div class="text-white-50 bg-dark">.text-white-50</div>

背景色

.bg-primary, .bg-secondary, .bg-success, .bg-danger はコンテキストに応じた背景色を指定します。

Sample
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
Code
<div class="p-1 mb-1 bg-primary text-white">.bg-primary</div>
<div class="p-1 mb-1 bg-secondary text-white">.bg-secondary</div>
<div class="p-1 mb-1 bg-success text-white">.bg-success</div>
<div class="p-1 mb-1 bg-danger text-white">.bg-danger</div>
<div class="p-1 mb-1 bg-warning text-dark">.bg-warning</div>
<div class="p-1 mb-1 bg-info text-white">.bg-info</div>
<div class="p-1 mb-1 bg-light text-dark">.bg-light</div>
<div class="p-1 mb-1 bg-dark text-white">.bg-dark</div>
<div class="p-1 mb-1 bg-white text-dark">.bg-white</div>
<div class="p-1 mb-1 bg-transparent text-dark">.bg-transparent</div>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/colors.html