Membuat Checkboxes dan Radio Buttons dengan Bootstrap 5

Membuat Checkboxes dan Radio Buttons dengan Bootstrap 5

—

by

Webbiz.ID
in

Berikut ini adalah contoh kode untuk membuat checkboxes dan radio buttons dengan menggunakan Bootstrap 5 dan mengaplikasikannya ke dalam form HTML

Checkboxes

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h3>Checkboxes</h3>
         <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkbox1">
            <label class="form-check-label" for="checkbox1">
            Pilihan 1
            </label>
         </div>
         <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkbox2">
            <label class="form-check-label" for="checkbox2">
            Pilihan 2
            </label>
         </div>
         <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkbox3">
            <label class="form-check-label" for="checkbox3">
            Pilihan 3
            </label>
         </div>
      </div>
   </body>
</html>
HTML
Bootstrap Example

Checkboxes


Radio button

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h3>Radio buttons</h3>
         <div class="form-check">
            <input class="form-check-input" type="radio" name="radio" id="radio1" value="option1">
            <label class="form-check-label" for="radio1">
            Pilihan 1
            </label>
         </div>
         <div class="form-check">
            <input class="form-check-input" type="radio" name="radio" id="radio2" value="option2">
            <label class="form-check-label" for="radio2">
            Pilihan 2
            </label>
         </div>
         <div class="form-check">
            <input class="form-check-input" type="radio" name="radio" id="radio3" value="option3">
            <label class="form-check-label" for="radio3">
            Pilihan 3
            </label>
         </div>
      </div>
   </body>
</html>
HTML
Bootstrap Example

Radio buttons


Anda dapat menggunakan kode di atas untuk membuat checkboxes dan radio buttons dengan tampilan yang konsisten dan responsif menggunakan Bootstrap 5.

Artikel Terbaru ⭐