Bootstrap membawa banyak kode CSS untuk mempercantik tampilan halaman, salah satunya terkait warna. Meskipun warna ini juga bisa dibuat lewat kode CSS biasa, tidak ada salahnya kita menggunakan class warna yang disediakan Bootstrap.
Untuk tutorial kali ini kita akan bahas cara mengubah warna teks di Bootstrap 5.
Mengubah Warna Teks di Bootstrap 5
Di dalam Bootstrap 5, terdapat 13 class untuk mengubah warna teks, yakni:
.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
Berikut contoh penggunaannya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
div > div {
border: 1px solid black;
width: 120px;
height: 50px;
margin: 0.3em;
padding: 10px 0;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="container">
<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">.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">.text-white</div>
<div class="text-black-50">.text-black-50</div>
<div class="text-white-50">.text-white-50</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
Terlihat warna teks dari setiap kotak berubah sesuai dengan nama classnya. Penamaan warna ini juga dipakai pada banyak komponen Bootstrap lain, misal jika kita menemukan suatu class bernama "primary", hasilnya akan menjadi warna biru, atau untuk class bernama "secondary" hasilnya menjadi warna abu-abu, dst.
Khusus untuk class .text-light, .text-white dan .text-white-50 efek warna tidak bisa terlihat karena menyatu dengan background putih. Kita harus mengubah warna background menjadi gelap:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
div > div {
border: 1px solid white;
width: 120px;
height: 50px;
margin: 0.3em;
padding: 10px 0;
text-align: center;
float: left;
}
body {
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<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">.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">.text-white</div>
<div class="text-black-50">.text-black-50</div>
<div class="text-white-50">.text-white-50</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
Itulah cara mengubah warna teks menggunakan class warna bawaan Bootstrap. Berikutnya kita akan bahas tentang cara mengubah warna background.