css

https://getbootstrap.jp/docs/4.5/getting-started/introduction/

ボーダー

テスト

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-bottom4-red {border-bottom: 4px solid #f77171 !important;}
.border-bottom4-blue {border-bottom: 4px solid #71b3f7 !important;}
.border-bottom4-green {border-bottom: 4px solid #96e259 !important;}
.border-bottom4-yellow {border-bottom: 4px solid #f5dd59 !important;}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #007bff !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-secondary-light {
  border-color: #e1e3e5 !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.border {

border: 1px solid #dee2e6 !important;

}

.border-top {

border-top: 1px solid #dee2e6 !important;

}

.border-right {

border-right: 1px solid #dee2e6 !important;

}

.border-bottom {

border-bottom: 1px solid #dee2e6 !important;

}

.border-bottom4-red {border-bottom: 4px solid #f77171 !important;}

.border-bottom4-blue {border-bottom: 4px solid #71b3f7 !important;}

.border-bottom4-green {border-bottom: 4px solid #96e259 !important;}

.border-bottom4-yellow {border-bottom: 4px solid #f5dd59 !important;}

.border-left {

border-left: 1px solid #dee2e6 !important;

}

.border-0 {

border: 0 !important;

}

.border-top-0 {

border-top: 0 !important;

}

.border-right-0 {

border-right: 0 !important;

}

.border-bottom-0 {

border-bottom: 0 !important;

}

.border-left-0 {

border-left: 0 !important;

}

.border-primary {

border-color: #007bff !important;

}

.border-secondary {

border-color: #6c757d !important;

}

.border-secondary-light {

border-color: #e1e3e5 !important;

}

.border-success {

border-color: #28a745 !important;

}

.border-info {

border-color: #17a2b8 !important;

}

.border-warning {

border-color: #ffc107 !important;

}

.border-danger {

border-color: #dc3545 !important;

}

.border-light {

border-color: #f8f9fa !important;

}

.border-dark {

border-color: #343a40 !important;

}

.border-white {

border-color: #fff !important;

}

角丸

テスト

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-tl {border-top-left-radius: 0.25rem !important;}
.rounded-tr {border-top-right-radius: 0.25rem !important;}
.rounded-bl {border-bottom-left-radius: 0.25rem !important;}
.rounded-br {border-bottom-right-radius: 0.25rem !important;}

.rounded {

border-radius: 0.25rem !important;

}

.rounded-top {

border-top-left-radius: 0.25rem !important;

border-top-right-radius: 0.25rem !important;

}

.rounded-right {

border-top-right-radius: 0.25rem !important;

border-bottom-right-radius: 0.25rem !important;

}

.rounded-bottom {

border-bottom-right-radius: 0.25rem !important;

border-bottom-left-radius: 0.25rem !important;

}

.rounded-left {

border-top-left-radius: 0.25rem !important;

border-bottom-left-radius: 0.25rem !important;

}

.rounded-circle {

border-radius: 50% !important;

}

.rounded-0 {

border-radius: 0 !important;

}

.rounded-tl {border-top-left-radius: 0.25rem !important;}

.rounded-tr {border-top-right-radius: 0.25rem !important;}

.rounded-bl {border-bottom-left-radius: 0.25rem !important;}

.rounded-br {border-bottom-right-radius: 0.25rem !important;}

float

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

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

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

.float-none {
  float: none !important;
}

.clearfix::after {

display: block;

clear: both;

content: "";

}

.float-left {

float: left !important;

}

.float-right {

float: right !important;

}

.float-none {

float: none !important;

}

vertical-align

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.align-baseline {

vertical-align: baseline !important;

}

.align-top {

vertical-align: top !important;

}

.align-middle {

vertical-align: middle !important;

}

.align-bottom {

vertical-align: bottom !important;

}

.align-text-bottom {

vertical-align: text-bottom !important;

}

.align-text-top {

vertical-align: text-top !important;

}

font

/* font size */
@media (min-width: 768px) {
	.txt-3s {font-size: 0.5rem !important;}
	.txt-2s {font-size: 0.75rem !important;}
	.txt-s {font-size: 0.85rem !important;}
	.txt-m {font-size: 1.00rem !important;}
	.txt-2m {font-size: 1.25rem !important;}
	.txt-l {font-size: 1.55rem !important;}
	.txt-2l {font-size: 1.75rem !important;}
	.txt-3l {font-size: 2.0rem !important;}
	.txt-4l {font-size: 2.75rem !important;}
	.txt-5l {font-size: 3.5rem !important;}
	.txt-6l {font-size: 5.0rem !important;}
}
@media (max-width: 767px) {
	.txt-3s {font-size: 0.5rem !important;}
	.txt-2s {font-size: 0.75rem !important;}
	.txt-s {font-size: 0.85rem !important;}
	.txt-m {font-size: 1.00rem !important;}
	.txt-2m {font-size: 1.25rem !important;}
	.txt-l {font-size: 1.55rem !important;}
	.txt-2l {font-size: 1.75rem !important;}
	.txt-3l {font-size: 2.0rem !important;}
	.txt-4l {font-size: 2.75rem !important;}
	.txt-5l {font-size: 3.5rem !important;}
	.txt-6l {font-size: 5.0rem !important;}
}

/* font weight */
.txt-wt-100 {font-weight: 100 !important;}
.txt-wt-200 {font-weight: 200 !important;}
.txt-wt-300 {font-weight: 300 !important;}
.txt-wt-400 {font-weight: 400 !important;}
.txt-wt-500 {font-weight: 500 !important;}
.txt-wt-600 {font-weight: 600 !important;}
.txt-wt-700 {font-weight: 700 !important;}
.txt-wt-800 {font-weight: 800 !important;}

/* font line height */
.txt-lh-1 {line-height: 1.0rem !important;}
.txt-lh-2 {line-height: 1.2rem !important;}
.txt-lh-3 {line-height: 1.4rem !important;}
.txt-lh-4 {line-height: 1.6rem !important;}
.txt-lh-5 {line-height: 1.8rem !important;}
.txt-lh-6 {line-height: 2.0rem !important;}
.txt-lh-7 {line-height: 2.2rem !important;}
.txt-lh-8 {line-height: 2.4rem !important;}

/* font size */

@media (min-width: 768px) {

.txt-3s {font-size: 0.5rem !important;}

.txt-2s {font-size: 0.75rem !important;}

.txt-s {font-size: 0.85rem !important;}

.txt-m {font-size: 1.00rem !important;}

.txt-2m {font-size: 1.25rem !important;}

.txt-l {font-size: 1.55rem !important;}

.txt-2l {font-size: 1.75rem !important;}

.txt-3l {font-size: 2.0rem !important;}

.txt-4l {font-size: 2.75rem !important;}

.txt-5l {font-size: 3.5rem !important;}

.txt-6l {font-size: 5.0rem !important;}

}

@media (max-width: 767px) {

.txt-3s {font-size: 0.5rem !important;}

.txt-2s {font-size: 0.75rem !important;}

.txt-s {font-size: 0.85rem !important;}

.txt-m {font-size: 1.00rem !important;}

.txt-2m {font-size: 1.25rem !important;}

.txt-l {font-size: 1.55rem !important;}

.txt-2l {font-size: 1.75rem !important;}

.txt-3l {font-size: 2.0rem !important;}

.txt-4l {font-size: 2.75rem !important;}

.txt-5l {font-size: 3.5rem !important;}

.txt-6l {font-size: 5.0rem !important;}

}

/* font weight */

.txt-wt-100 {font-weight: 100 !important;}

.txt-wt-200 {font-weight: 200 !important;}

.txt-wt-300 {font-weight: 300 !important;}

.txt-wt-400 {font-weight: 400 !important;}

.txt-wt-500 {font-weight: 500 !important;}

.txt-wt-600 {font-weight: 600 !important;}

.txt-wt-700 {font-weight: 700 !important;}

.txt-wt-800 {font-weight: 800 !important;}

/* font line height */

.txt-lh-1 {line-height: 1.0rem !important;}

.txt-lh-2 {line-height: 1.2rem !important;}

.txt-lh-3 {line-height: 1.4rem !important;}

.txt-lh-4 {line-height: 1.6rem !important;}

.txt-lh-5 {line-height: 1.8rem !important;}

.txt-lh-6 {line-height: 2.0rem !important;}

.txt-lh-7 {line-height: 2.2rem !important;}

.txt-lh-8 {line-height: 2.4rem !important;}

margin padding

/* margin0 */
.m-0 {margin: 0 !important;}
.mt-0,.my-0 {margin-top: 0 !important;}
.mr-0,.mx-0 {margin-right: 0 !important;}
.mb-0,.my-0 {margin-bottom: 0 !important;}
.ml-0,.mx-0 {margin-left: 0 !important;}

/* margin1 */
.m-1 {margin: 0.25rem !important;}
.mt-1,.my-1 {margin-top: 0.25rem !important;}
.mr-1,.mx-1 {margin-right: 0.25rem !important;}
.mb-1,.my-1 {margin-bottom: 0.25rem !important;}
.ml-1,.mx-1 {margin-left: 0.25rem !important;}

/* margin2 */
.m-2 {margin: 0.5rem !important;}
.mt-2,.my-2 {margin-top: 0.5rem !important;}
.mr-2,
.mx-2 { margin-right: 0.5rem !important;}
.mb-2,
.my-2 {margin-bottom: 0.5rem !important;}
.ml-2,
.mx-2 {margin-left: 0.5rem !important;}

/* margin3 */
.m-3 {margin: 1rem !important;}
.mt-3,
.my-3 {margin-top: 1rem !important;}
.mr-3,
.mx-3 {margin-right: 1rem !important;}
.mb-3,
.my-3 {margin-bottom: 1rem !important;}
.ml-3,
.mx-3 {margin-left: 1rem !important;}

/* margin4 */
.m-4 {margin: 1.5rem !important;}
.mt-4,
.my-4 {margin-top: 1.5rem !important;}
.mr-4,
.mx-4 {margin-right: 1.5rem !important;}
.mb-4,
.my-4 {margin-bottom: 1.5rem !important;}
.ml-4,
.mx-4 {margin-left: 1.5rem !important;}

/* margin5 */
.m-5 {margin: 3rem !important;}
.mt-5,
.my-5 {margin-top: 3rem !important;}
.mr-5,
.mx-5 {margin-right: 3rem !important;}
.mb-5,
.my-5 {margin-bottom: 3rem !important;}
.ml-5,
.mx-5 {margin-left: 3rem !important;}

/* padding txt */
.p-txt {padding: 0 0.25rem 0 0.25rem !important;}

/* padding0 */
.p-0 {padding: 0 !important;}
.pt-0,
.py-0 {padding-top: 0 !important;}
.pr-0,
.px-0 {padding-right: 0 !important;}
.pb-0,
.py-0 {padding-bottom: 0 !important;}
.pl-0,
.px-0 {padding-left: 0 !important;}

/* padding1 */
.p-1 {padding: 0.25rem !important;}
.pt-1,
.py-1 {padding-top: 0.25rem !important;}
.pr-1,
.px-1 {padding-right: 0.25rem !important;}
.pb-1,
.py-1 {padding-bottom: 0.25rem !important;}
.pl-1,
.px-1 {padding-left: 0.25rem !important;}

/* padding2 */
.p-2 {padding: 0.5rem !important;}
.pt-2,
.py-2 {padding-top: 0.5rem !important;}
.pr-2,
.px-2 {padding-right: 0.5rem !important;}
.pb-2,
.py-2 {padding-bottom: 0.5rem !important;}
.pl-2,
.px-2 {padding-left: 0.5rem !important;}

/* padding3 */
.p-3 {padding: 1rem !important;}
.pt-3,
.py-3 {padding-top: 1rem !important;}
.pr-3,
.px-3 {padding-right: 1rem !important;}
.pb-3,
.py-3 {padding-bottom: 1rem !important;}
.pl-3,
.px-3 {padding-left: 1rem !important;}

/* padding4 */
.p-4 {padding: 1.5rem !important;}
.pt-4,
.py-4 {padding-top: 1.5rem !important;}
.pr-4,
.px-4 {padding-right: 1.5rem !important;}
.pb-4,
.py-4 {padding-bottom: 1.5rem !important;}
.pl-4,
.px-4 {padding-left: 1.5rem !important;}

/* padding5 */
.p-5 {padding: 3rem !important;}
.pt-5,
.py-5 {padding-top: 3rem !important;}
.pr-5,
.px-5 {padding-right: 3rem !important;}
.pb-5,
.py-5 {padding-bottom: 3rem !important;}
.pl-5,
.px-5 {padding-left: 3rem !important;}

/* margin auto */
.m-auto {margin: auto !important;}
.mt-auto,
.my-auto {margin-top: auto !important;}
.mr-auto,
.mx-auto {margin-right: auto !important;}
.mb-auto,
.my-auto {margin-bottom: auto !important;}
.ml-auto,
.mx-auto {margin-left: auto !important;}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

/* margin0 */

.m-0 {margin: 0 !important;}

.mt-0,.my-0 {margin-top: 0 !important;}

.mr-0,.mx-0 {margin-right: 0 !important;}

.mb-0,.my-0 {margin-bottom: 0 !important;}

.ml-0,.mx-0 {margin-left: 0 !important;}

/* margin1 */

.m-1 {margin: 0.25rem !important;}

.mt-1,.my-1 {margin-top: 0.25rem !important;}

.mr-1,.mx-1 {margin-right: 0.25rem !important;}

.mb-1,.my-1 {margin-bottom: 0.25rem !important;}

.ml-1,.mx-1 {margin-left: 0.25rem !important;}

/* margin2 */

.m-2 {margin: 0.5rem !important;}

.mt-2,.my-2 {margin-top: 0.5rem !important;}

.mr-2,

.mx-2 { margin-right: 0.5rem !important;}

.mb-2,

.my-2 {margin-bottom: 0.5rem !important;}

.ml-2,

.mx-2 {margin-left: 0.5rem !important;}

/* margin3 */

.m-3 {margin: 1rem !important;}

.mt-3,

.my-3 {margin-top: 1rem !important;}

.mr-3,

.mx-3 {margin-right: 1rem !important;}

.mb-3,

.my-3 {margin-bottom: 1rem !important;}

.ml-3,

.mx-3 {margin-left: 1rem !important;}

/* margin4 */

.m-4 {margin: 1.5rem !important;}

.mt-4,

.my-4 {margin-top: 1.5rem !important;}

.mr-4,

.mx-4 {margin-right: 1.5rem !important;}

.mb-4,

.my-4 {margin-bottom: 1.5rem !important;}

.ml-4,

.mx-4 {margin-left: 1.5rem !important;}

/* margin5 */

.m-5 {margin: 3rem !important;}

.mt-5,

.my-5 {margin-top: 3rem !important;}

.mr-5,

.mx-5 {margin-right: 3rem !important;}

.mb-5,

.my-5 {margin-bottom: 3rem !important;}

.ml-5,

.mx-5 {margin-left: 3rem !important;}

/* padding txt */

.p-txt {padding: 0 0.25rem 0 0.25rem !important;}

/* padding0 */

.p-0 {padding: 0 !important;}

.pt-0,

.py-0 {padding-top: 0 !important;}

.pr-0,

.px-0 {padding-right: 0 !important;}

.pb-0,

.py-0 {padding-bottom: 0 !important;}

.pl-0,

.px-0 {padding-left: 0 !important;}

/* padding1 */

.p-1 {padding: 0.25rem !important;}

.pt-1,

.py-1 {padding-top: 0.25rem !important;}

.pr-1,

.px-1 {padding-right: 0.25rem !important;}

.pb-1,

.py-1 {padding-bottom: 0.25rem !important;}

.pl-1,

.px-1 {padding-left: 0.25rem !important;}

/* padding2 */

.p-2 {padding: 0.5rem !important;}

.pt-2,

.py-2 {padding-top: 0.5rem !important;}

.pr-2,

.px-2 {padding-right: 0.5rem !important;}

.pb-2,

.py-2 {padding-bottom: 0.5rem !important;}

.pl-2,

.px-2 {padding-left: 0.5rem !important;}

/* padding3 */

.p-3 {padding: 1rem !important;}

.pt-3,

.py-3 {padding-top: 1rem !important;}

.pr-3,

.px-3 {padding-right: 1rem !important;}

.pb-3,

.py-3 {padding-bottom: 1rem !important;}

.pl-3,

.px-3 {padding-left: 1rem !important;}

/* padding4 */

.p-4 {padding: 1.5rem !important;}

.pt-4,

.py-4 {padding-top: 1.5rem !important;}

.pr-4,

.px-4 {padding-right: 1.5rem !important;}

.pb-4,

.py-4 {padding-bottom: 1.5rem !important;}

.pl-4,

.px-4 {padding-left: 1.5rem !important;}

/* padding5 */

.p-5 {padding: 3rem !important;}

.pt-5,

.py-5 {padding-top: 3rem !important;}

.pr-5,

.px-5 {padding-right: 3rem !important;}

.pb-5,

.py-5 {padding-bottom: 3rem !important;}

.pl-5,

.px-5 {padding-left: 3rem !important;}

/* margin auto */

.m-auto {margin: auto !important;}

.mt-auto,

.my-auto {margin-top: auto !important;}

.mr-auto,

.mx-auto {margin-right: auto !important;}

.mb-auto,

.my-auto {margin-bottom: auto !important;}

.ml-auto,

.mx-auto {margin-left: auto !important;}

alert

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

</div>

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>

<hr>

<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>

</div>

Example heading New

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

<h2>Example heading <span class="badge badge-secondary">New</span></h2>

<h3>Example heading <span class="badge badge-secondary">New</span></h3>

<h4>Example heading <span class="badge badge-secondary">New</span></h4>

<h5>Example heading <span class="badge badge-secondary">New</span></h5>

<h6>Example heading <span class="badge badge-secondary">New</span></h6>

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Notifications <span class="badge badge-light">4</span>

</button>

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Profile <span class="badge badge-light">9</span>

<span class="sr-only">unread messages</span>

</button>

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-light">Light</span>

Primary Secondary Success Danger Warning Info Light Dark

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

<a href="#" class="badge badge-primary">Primary</a>

<a href="#" class="badge badge-secondary">Secondary</a>

<a href="#" class="badge badge-success">Success</a>

<a href="#" class="badge badge-danger">Danger</a>

<a href="#" class="badge badge-warning">Warning</a>

<a href="#" class="badge badge-light">Light</a>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

</ol>

</nav>

<li class="breadcrumb-item active" aria-current="page">Library</li>

</ol>

</nav>

<li class="breadcrumb-item"><a href="#">Library</a></li>

</ol>

</nav>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-light">Light</button>

Link

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

<button class="btn btn-primary" type="submit">Button</button>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Dropdown button

</button>

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

● ポイント

ポイント: テキストテキストテキストテキストテキストテキストテキストテキスト

注目

●

画像

注意

ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。
注釈など、注意書きに使ってもいいですね。

●

画像

チェック

ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。
注釈など、注意書きに使ってもいいですね。

●

画像

注目

ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。
注釈など、注意書きに使ってもいいですね。

●
<div class="my-alert">
<span>画像</span>
<p class="txt-m m-0"><strong>注意</strong></p>
<p class="m-0">ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>
注釈など、注意書きに使ってもいいですね。</p>
</div>

●
<div class="my-alert accepted">
<span>画像</span>
<p class="txt-m m-0"><strong>チェック</strong></p>
<p class="m-0">ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>
注釈など、注意書きに使ってもいいですね。</p>
</div>

●
<div class="my-alert warning">
<span>画像</span>
<p class="txt-m m-0"><strong>注目</strong></p>
<p class="m-0">ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>
注釈など、注意書きに使ってもいいですね。</p>
</div>

●

<p class="m-0">ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>

注釈など、注意書きに使ってもいいですね。</p>

</div>

●

<p class="m-0">ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>

注釈など、注意書きに使ってもいいですね。</p>

</div>

●

<p class="m-0">ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>

注釈など、注意書きに使ってもいいですね。</p>

</div>

テキスト色

灰色 ○○○ ○○○ ○○○ ○○○ 緑 ○○○ ○○○ ○○○ ○○○ 黄色 ○○○ ○○○ ○○○ ○○○ オレンジ ○○○ ○○○ ○○○ ○○○ 赤 ○○○ ○○○ ○○○ ○○○ 青 ○○○ ○○○ ○○○ ○○○ ターコイズブルー ○○○ ○○○ ○○○ ○○○ 紫 ○○○ ○○○ ○○○ ○○○ 茶色 ○○○ ○○○ ○○○ ○○○ 黒 ○○○ ○○○ ○○○

灰色
<span class="txt-clr-lightgray">○○○</span>
<span class="txt-clr-gray">○○○</span>
<span class="txt-clr-darkgray">○○○</span>
<span class="txt-clr-deepgray">○○○</span>

緑
<span class="txt-clr-lightgreen">○○○</span>
<span class="txt-clr-green">○○○</span>
<span class="txt-clr-darkgreen">○○○</span>
<span class="txt-clr-deepgreen">○○○</span>

黄色
<span class="txt-clr-lightyellow">○○○</span>
<span class="txt-clr-yellow">○○○</span>
<span class="txt-clr-darkyellow">○○○</span>
<span class="txt-clr-deepyellow">○○○</span>

オレンジ
<span class="txt-clr-lightorange">○○○</span>
<span class="txt-clr-orange">○○○</span>
<span class="txt-clr-darkorange">○○○</span>
<span class="txt-clr-deeporange">○○○</span>

赤
<span class="txt-clr-lightred">○○○</span>
<span class="txt-clr-red">○○○</span>
<span class="txt-clr-darkred">○○○</span>
<span class="txt-clr-deepred">○○○</span>

青
<span class="txt-clr-lightblue">○○○</span>
<span class="txt-clr-blue">○○○</span>
<span class="txt-clr-darkblue">○○○</span>
<span class="txt-clr-deepblue">○○○</span>

ターコイズブルー
<span class="txt-clr-lighttqsblue">○○○</span>
<span class="txt-clr-tqsblue">○○○</span>
<span class="txt-clr-darktqsblue">○○○</span>
<span class="txt-clr-deeptqsblue">○○○</span>

紫
<span class="txt-clr-lightpurple">○○○</span>
<span class="txt-clr-purple">○○○</span>
<span class="txt-clr-darkpurple">○○○</span>
<span class="txt-clr-deeppurple">○○○</span>

茶色
<span class="txt-clr-lightbrown">○○○</span>
<span class="txt-clr-brown">○○○</span>
<span class="txt-clr-darkbrown">○○○</span>
<span class="txt-clr-deepbrown">○○○</span>

黒
<span class="txt-clr-black">○○○</span>
<span class="txt-clr-officered">○○○</span>
<span class="txt-clr-officeblue">○○○</span>

灰色

緑

黄色

オレンジ

赤

青

ターコイズブルー

紫

茶色

黒

塗りつぶし

灰色

○○○
○○○
○○○
○○○

緑

○○○
○○○
○○○
○○○

黄色

○○○
○○○
○○○
○○○

オレンジ

○○○
○○○
○○○
○○○

赤

○○○
○○○
○○○
○○○

青

○○○
○○○
○○○
○○○

ターコイズブルー

○○○
○○○
○○○
○○○

紫

○○○
○○○
○○○
○○○

茶色

○○○
○○○
○○○
○○○

黒

○○○
○○○
○○○

灰色
<span class="mark-lightgray-shadow">○○○</span>
<span class="mark-gray-shadow">○○○</span>
<span class="mark-darkgray-shadow">○○○</span>
<span class="mark-deepgray-shadow">○○○</span>

緑
<span class="mark-lightgreen-shadow">○○○</span>
<span class="mark-green-shadow">○○○</span>
<span class="mark-darkgreen-shadow">○○○</span>
<span class="mark-deepgreen-shadow">○○○</span>

黄色
<span class="mark-lightyellow-shadow">○○○</span>
<span class="mark-yellow-shadow">○○○</span>
<span class="mark-darkyellow-shadow">○○○</span>
<span class="mark-deepyellow-shadow">○○○</span>

オレンジ
<span class="mark-lightorange-shadow">○○○</span>
<span class="mark-orange-shadow">○○○</span>
<span class="mark-darkorange-shadow">○○○</span>
<span class="mark-deeporange-shadow">○○○</span>

赤
<span class="mark-lightred-shadow">○○○</span>
<span class="mark-red-shadow">○○○</span>
<span class="mark-darkred-shadow">○○○</span>
<span class="mark-deepred-shadow">○○○</span>

青
<span class="mark-lightblue-shadow">○○○</span>
<span class="mark-blue-shadow">○○○</span>
<span class="mark-darkblue-shadow">○○○</span>
<span class="mark-deepblue-shadow">○○○</span>

ターコイズブルー
<span class="mark-lighttqsblue-shadow">○○○</span>
<span class="mark-tqsblue-shadow">○○○</span>
<span class="mark-darktqsblue-shadow">○○○</span>
<span class="mark-deeptqsblue-shadow">○○○</span>

紫
<span class="mark-lightpurple-shadow">○○○</span>
<span class="mark-purple-shadow">○○○</span>
<span class="mark-darkpurple-shadow">○○○</span>
<span class="mark-deeppurple-shadow">○○○</span>

茶色
<span class="mark-lightbrown-shadow">○○○</span>
<span class="mark-brown-shadow">○○○</span>
<span class="mark-darkbrown-shadow">○○○</span>
<span class="mark-deepbrown-shadow">○○○</span>

黒
<span class="mark-black-shadow">○○○</span>
<span class="mark-officered-shadow">○○○</span>
<span class="mark-officeblue-shadow">○○○</span>

灰色

緑

黄色

オレンジ

赤

青

ターコイズブルー

紫

茶色

黒

背景

白 ○○○ 灰色 ○○○ ○○○ ○○○ ○○○ 緑 ○○○ ○○○ ○○○ ○○○ 黄色 ○○○ ○○○ ○○○ ○○○ オレンジ ○○○ ○○○ ○○○ ○○○ 赤 ○○○ ○○○ ○○○ ○○○ 青 ○○○ ○○○ ○○○ ○○○ ターコイズブルー ○○○ ○○○ ○○○ ○○○ 紫 ○○○ ○○○ ○○○ ○○○ 茶色 ○○○ ○○○ ○○○ ○○○ 黒 ○○○ ○○○ ○○○

白
<span class="bg-white">○○○</span>

灰色
<span class="bg-lightgray">○○○</span>
<span class="bg-gray">○○○</span>
<span class="bg-darkgray">○○○</span>
<span class="bg-deepgray">○○○</span>

緑
<span class="bg-lightgreen">○○○</span>
<span class="bg-green">○○○</span>
<span class="bg-darkgreen">○○○</span>
<span class="bg-deepgreen">○○○</span>

黄色
<span class="bg-lightyellow">○○○</span>
<span class="bg-yellow">○○○</span>
<span class="bg-darkyellow">○○○</span>
<span class="bg-deepyellow">○○○</span>

オレンジ
<span class="bg-lightorange">○○○</span>
<span class="bg-orange">○○○</span>
<span class="bg-darkorange">○○○</span>
<span class="bg-deeporange">○○○</span>

赤
<span class="bg-lightred">○○○</span>
<span class="bg-red">○○○</span>
<span class="bg-darkred">○○○</span>
<span class="bg-deepred">○○○</span>

青
<span class="bg-lightblue">○○○</span>
<span class="bg-blue">○○○</span>
<span class="bg-darkblue">○○○</span>
<span class="bg-deepblue">○○○</span>

ターコイズブルー
<span class="bg-lighttqsblue">○○○</span>
<span class="bg-tqsblue">○○○</span>
<span class="bg-darktqsblue">○○○</span>
<span class="bg-deeptqsblue">○○○</span>

紫
<span class="bg-lightpurple">○○○</span>
<span class="bg-purple">○○○</span>
<span class="bg-darkpurple">○○○</span>
<span class="bg-deeppurple">○○○</span>

茶色
<span class="bg-lightbrown">○○○</span>
<span class="bg-brown">○○○</span>
<span class="bg-darkbrown">○○○</span>
<span class="bg-deepbrown">○○○</span>

黒
<span class="bg-black">○○○</span>
<span class="bg-officered">○○○</span>
<span class="bg-officeblue">○○○</span>

白

灰色

緑

黄色

オレンジ

赤

青

ターコイズブルー

紫

茶色

黒

ボタン

北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地北海道
札幌市の土地

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-gray"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-green"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-yellow"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-orange"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-red"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-blue"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-tqsblue"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-purple"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>
<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-brown"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-gray"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-green"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-yellow"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-orange"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-red"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-blue"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-tqsblue"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-purple"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>

<a href="URL" rel="noopener noreferrer" target="_blank" class="btn-rnd bg-brown"><span class="txt-s">北海道</span><br/><span class="txt-l">札幌市の土地</span></a>