Cara mengubah warna tulisan di tabel html

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.

Table of Contents Show

Mengubah Warna Teks di Bootstrap 5
Bagaimana cara merubah warna huruf?
Apa nama tag untuk mengubah warna tulisan?
Atribut apa yang digunakan untuk mengubah warna sebuah teks?
Tuliskan langkah mengubah warna tulisan pada text box?

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

<!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>

<!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>

<!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>

<!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>

<!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>

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.

Saat ini di Duniailkom tersedia eBook / buku Bootstrap 5 Uncover. Dengan 529 halaman A4, materi di buku jauh lebih banyak daripada tutorial Bootstrap di web Duniailkom. Penjelasan lebih lanjut bisa ke: Bootstrap 5 Uncover – Panduan Belajar Framework Bootstrap.

Bagaimana cara merubah warna huruf?

Masuk ke Format > Font > Font. + D untuk membuka kotak dialog Font. Pilih panah di samping Warna font, lalu pilih warna.

Apa nama tag untuk mengubah warna tulisan?

Dengan tag font, Anda dapat mengatur ataupun mengubah warna dan ukuran suatu teks.

Atribut apa yang digunakan untuk mengubah warna sebuah teks?

Warna (color) teks pada CSS dapat diubah dengan menggunakan properti color. Properti ini menerima nilai dalam berbagai bentuk seperti nama warna standar HTML dan CSS (color name) yang berjumlah 140 buah, nilai warna dalam bentuk kode hexadesimal, kode warna RGB(A) dan kode warna HSL(A).