[Bootstrap] 색상 클래스

1. 색상 클래스

• 웹 애플리케이셔은 글자 색, 배경 색 등의 색상 설정이 가능함
• Bootstrap에서는 색상을 간편하게 설정할 수 있도록 css 클래스로 제공하고 있음

 

2. 글자색 클래스

• text-muted
• text-primary
• text-success
• text-info
• text-warning
• text-danger
• text-secondary (BS4)
• text-dark (BS4)
• text-body (BS4)
• text-light (BS4)
• text-white (BS4)

		<h3>글자색 색상 클래스</h3>
		<p class="text-muted">muted 색상</p>
		<p class="text-primary">primary 색상</p>
		<p class="text-success">text-success 색상</p>
		<p class="text-info">text-info 색상</p>
		<p class="text-warning">text-warning 색상</p>
		<p class="text-danager">text-danager 색상</p>
		<p class="text-secondary">text-secondary 색상</p>
		<p class="text-dark">text-dark 색상</p>
		<p class="text-body">text-body 색상</p>
		<p class="text-light" style="background-color: black;">text-light 색상</p>
		<p class="text-white" style="background-color: black;">text-white 색상</p>
		<hr>

 

3. 배경색 클래스

• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-secondary (BS4)
• bg-dark (BS4)
• bg-light (BS4)

		<h3>배경색 색상 클래스</h3>
		<p class="text-white bg-primary">primary 배경색</p>
		<p class="text-white bg-success">bg-success 배경색</p>
		<p class="text-white bg-info">bg-success 배경색</p>
		<p class="text-white bg-warning">bg-success 배경색</p>
		<p class="text-white bg-danger">bg-success 배경색</p>
		<p class="text-white bg-secondary">bg-success 배경색</p>
		<p class="text-white bg-dark">bg-success 배경색</p>
		<p class="text-white bg-light">bg-success 배경색</p>

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Color/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial