Bootstrap kullanmanın birçok faydasını biliyoruz. Bunlardan biride hazır class’ları kullanarak hem arkaplan rengi hem de yazı rengini verebiliyor olmamız. Bu yazımızda arkaplan ve yazı renklerini verebilmek için hangi class’ları kullanmamız gerektiğinden bahsedeceğiz. Birde bu class’ların hangi renk kodları ile oluşturulduğuna bakacağız.
ARKAPLAN RENGİ İÇİN KULLANABİLECEĞİMİZ CLASS’LAR VE RENK KODLARI
Arka plan rengi verebilmek için kullanabileceğimiz class isimleri ve renk kodları tablosu şu şekilde:
| Class | Renk Kodları |
|---|---|
| bg-primary | #007bff |
| bg-info | #17a2b8 |
| bg-danger | #dc3545 |
| bg-warning | #ffc107 |
| bg-success | #28a745 |
| bg-secondary | #6c757d |
| bg-dark | #343a40 |
| bg-light | #f8f9fa |
Gördüğünüz gibi Bootstrap 4 ile arkaplan rengi verebilmek için 8 farklı class’ı kullanabiliyoruz.
YAZILAR İÇİN KULLANABİLECEĞİMİZ CLASS’LAR VE RENK KODLARI
Yazı rengi verebilmek için kullanabileceğimiz class isimleri ve renk kodları tablosu şu şekilde:
| Class | Renk Kodları |
|---|---|
| text-primary | #007bff |
| text-info | #17a2b8 |
| text-danger | #dc3545 |
| text-warning | #ffc107 |
| text-success | #28a745 |
| text-secondary | #6c757d |
| text-dark | #343a40 |
| text-muted | #6c757d |
| text-light | #f8f9fa |
| text-white | #ffffff |
Gördüğünüz gibi Bootstrap 4 ile yazı rengi verebilmek için 10 farklı class’ı kullanabiliyoruz.
Not : .text-black-50 class’ı ile yazılara siyah rengi %50 şeffaflaştırarak verebiliriz. Aynı şekilde .text-white-50 class’ı ile yazılara beyaz rengi %50 şeffaflaştırarak verebiliriz.
Daha fazla bilgi için Bootstrap’ın resmi sitesini ziyaret edebilirsiniz.
Şu yazılar da ilginizi çekebilir.
Tüm Renk İsimleri ve Renk Kodları (Html, Css, Hex, Rgb)
Web Tasarımlarınızda Kullanabileceğiniz Tam 150 Farklı Renk Paleti
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
