Radio

Bootstrap 5 Radio

Bootstrap 5 Radio is a component that limits users to make a selection from a list of preset options, whereas Checkboxes are used to select multiple options

Single Radio

radio1

radio2

radio3

radio4

HTML

html

<div class="custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio1">radio1</label>
</div>
<div class="custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio2">radio2</label>
</div>
<div class="custom-radio">
  <input type="radio" id="customRadio3" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio3">radio3</label>
</div>
<div class="custom-radio">
  <input type="radio" id="customRadio4" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio4">radio4</label>
</div>

Bootstrap Radio Group with Colors

Contrast Bootstrap 5 Radio allows you to make radio buttons styled with colors.

HTML

html

<div class="custom-radio">
                <input type="radio" id="customRadio5" name="customRadio2" class="custom-radio-input text-info">
                <label class="custom-control-label" for="customRadio5"></label>
            </div>
            <div class="custom-radio">
                <input type="radio" id="customRadio6" name="customRadio3" class="custom-radio-input text-danger">
                <label class="custom-control-label" for="customRadio6"></label>
            </div>
            <div class="custom-radio">
                <input type="radio" id="customRadio7" name="customRadi4" class="custom-radio-input text-primary">
                <label class="custom-control-label" for="customRadio7"></label>
            </div>
            <div class="custom-radio">
              <input type="radio" id="customRadio8" name="customRadi5" class="custom-radio-input text-dark">
              <label class="custom-control-label" for="customRadio8"></label>
          </div>
        </div>

Visually build tailwind css projects 10x faster using AI

Build Tailwind websites visually and ship projects to production in minutes instead of days. Generates code from your designs to export to your favourite frameworks like React, Vue, Angular.

Try Windframe out for free.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Progress

Select