Mengasingkan Elemen Radio Menggunakan Bootstrap: Panduan Langkah demi Langkah

Question

Saya mencuba seribu cara tetapi saya tidak dapat gaya atau ruang untuk ini. Saya perlu menggunakan bootstrap.

Saya memerlukannya untuk kelihatan seperti ini

---

tetapi saya adalah

Kod saya ialah:

<!-- Cuarta fila  -->
<div class="col-6">
   <label for="creditc" class="form-label fw-bold">We accept:</label>
   <div>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-visa"></i>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-mastercard"></i>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-apple-pay"></i>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-amazon-pay"></i>
   </div>
</div>
<div class="col-6">
   <label for="city" class="form-label fw-bold">Message</label>
   <textarea class="form-control" style="overflow:auto;resize:none"></textarea>
   <small id="passwordHelpBlock" class="form-text text-muted">Add any notes here.</small>
</div>

Saya tahu saya tidak menggunakan sebarang kod gaya atau apa-apa sekarang, tetapi saya telah mencuba longkang, jarak, warna (bs-menengah) dan tiada apa-apa yang berkesan.

Answer 1

Saya mencipta kod lengkap sebagai contoh, sebenarnya terdapat banyak cara untuk membuatnya; Saya memilih yang terpendek dan terpantas untuk saya

.contain-brand{
  width: fit-content;
  background-color: #6d757c;
}

.fa-brands{color:#FFF;}

/*edit standard css bootstrap*/
.form-check-input{margin-top: 0!important;}

    We accept:
    

        

            
        
        

            
        
        

            
        
        

            
        
    


    Message
    
    Add any notes here.