1200

Komple Uygulamalı Web Geliştirme Eğitimi

Bootstrap Colors

Boostrap 4 ile yazı rengi, link rengi, buton rengi ve zemin renkleri için css sınıfları nelerdir ve bootstrap renk sınıflarını nasıl kullanıyoruz?

Boostrap 4 css kütüphanesi ile web sayfalarımızda önceden belirlenmiş renk kodları içeren css sınıflarını kullanarak güzel görünümler oluşturabiliriz.

Boostrap 4 ile Yazı Renkleri

Bootstrap 4 ile yazıları renklendirmek için kullanabileceğimiz bootstrap text css sınıfları aşağıdadır.

.text-muted: This text is muted.

.text-primary: This text is important.

.text-success: This text indicates success.

.text-info: This text represents some information.

.text-warning: This text represents a warning.

.text-danger: This text represents danger.

.text-secondary: Secondary text.

.text-white: This text is dark grey.

.text-dark: Default body color (often black).

.text-body: This text is light grey (on white background).

.text-light: This text is white (on white background).

Örnek 1 için tıklayınız.

 

Bootstrap 4 ile Link Renkleri

Bootstrap 4 ile linkleri renklendirmek için kullanabileceğimiz bootstrap link css sınıfları aşağıdadır.

** :hover olayı için link üzerine geliniz.

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.

Örnek 2 için tıklayınız.

 

Bootstrap 4 ile Arkaplan Renkleri

Bootstrap 4 ile background-color yani zemin rengi vermek için kullanabileceğimiz bootsrap background css sınıfları aşağıdadır.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Örnek 3 için tıklayınız.

 

Boostrap 4 ile Button Renkleri

Bootstrap 4 ile button rengi vermek için kullanabileceğimiz bootsrap button css sınıfları aşağıdadır.

BasicPrimarySecondarySuccessInfoWarningDangerDarkLightLink

 

Örnek 4 için tıklayınız.