If you have a rundown of choices and you need the client to pick one among them. Then, utilize the responsive radio button layouts produced using bootstrap. Here, you can find many options of radio buttons to embed on the website.
Radio buttons are to choose any one option from a list available. There are many such templates available in Bootstrap Rev. The radio buttons constitute an attractive web design.
It is the default radio button styling. Just copy the code and use it to make further changes in the design.
form-check is the default class for this style.
form-check-input is the class name for the input tag.
form-check-label is the class name for the label tag.
<div class="form-check">
<input class="form-check-input" name="defaultradio" checked type="radio" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="defaultradio" type="radio" id="flexRadioDefault2">
<label class="form-check-label" for="flexRadioDefault2">
Default radio
</label>
</div>
It looks immense beautiful while using the theme color of the website to decorate the radio buttons. If you also want to get such elegant designs, all you need to do is copying the code and use it by pasting it on the editor.
One can change the color also by the steps given ahead.
form-radio-s1 is the class name for this design. s1 denotes Style 1.
form-radio-input-s1 is the class name for the input tag.
form-radio-label-s1 is the class name for the tag.
Step 1: Use .form-radio-s1 label.form-radio-label-s1:after class target and change the border-color to your theme color.
<div class="form-radio-s1">
<input class="form-radio-input-s1" name="s1" checked type="radio" id="formradios1">
<label class="form-radio-label-s1" for="formradios1">
Radio Button S1
</label>
</div>
<div class="form-radio-s1">
<input class="form-radio-input-s1" name="s1" type="radio" id="formradios11">
<label class="form-radio-label-s1" for="formradios11">
Radio Button S1
</label>
</div>
The design of this radio button is to denote the list of radio buttons. It is widely used for choosing an option from the list of options. You can also expand the list. Expanding will not harm the rounded sides of the button.
Unchecked Color: Use .form-radio-s2 label.form-radio-label-s2 class target and change the background-color to your theme color.
Checked Color: Use .form-radio-s2 input:checked + label.form-radio-label-s2 class target and change the background-color to your theme color.
Use .md-break in main div radio-list to break the radio list after 1024px.
Use .sm-break in main div radio-list to break the radio list after 768px.
Use .xs-break in main div radio-list to break the radio list after 500px.
<div class="radio-list">
<div class="form-radio-s2">
<input class="form-radio-input-s2" checked name="s2" type="radio" id="formradios2">
<label class="form-radio-label-s2" for="formradios2">
Radio Button s2
</label>
</div>
<div class="form-radio-s2">
<input class="form-radio-input-s2" name="s2" type="radio" id="formradios22">
<label class="form-radio-label-s2" for="formradios22">
Radio Button s2
</label>
</div>
<div class="form-radio-s2">
<input class="form-radio-input-s2" name="s2" type="radio" id="formradios222">
<label class="form-radio-label-s2" for="formradios222">
Radio Button s2
</label>
</div>
</div>
These radio buttons are highly in use for selecting plans or pipelines. It is exceptionally responsive and adjustable. One can give the heading, portrayal, and content of their choice.
The designers can also change the tone. They can also add/remove some of the options from the list.
radio-list-s3 class is for the list. Here, s3 denotes Style3.
form-radio-s3 is for individual boxes.
form-radio-input-s3 is denoting the input tags.
form-radio-label-s3 is denoting the label tags.
span tag with the class name as virtual-rb is for icons. Change the icon by changing the bi bi-check2 class and using any other icon class.
span tag with the headline class name is for the heading of the card.
span tag with the content class name is for the Content in the card.
Note: You can change the span tag to another tag as per your need. However, make sure to keep everything inside the label.
Unchecked Color: Use .form-radio-s3 label.form-radio-label-s3 class target and change the border-color and box-shadow and background-color to your theme color.
Checked Color: Use .form-radio-s3 input:checked + label.form-radio-label-s3 class target and change the border-color and box-shadow to your theme color.
Use .md-break in main div radio-list-s3 to break the radio list after 1024px.
Use .sm-break in main div radio-list-s3 to break the radio list after 768px.
Use .xs-break in main div radio-list-s3 to break the radio list after 500px.
<div class="radio-list-s3">
<div class="form-radio-s3">
<input class="form-radio-input-s3" checked name="s3" type="radio" id="formradios3">
<label class="form-radio-label-s3" for="formradios3">
<span class="virtual-rb"><i class="bi bi-check2"></i></span>
<span class="headline">
Big
</span>
<span class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing
</span>
</label>
</div>
<div class="form-radio-s3">
<input class="form-radio-input-s3" name="s3" type="radio" id="formradios32">
<label class="form-radio-label-s3" for="formradios32">
<span class="virtual-rb"><i class="bi bi-check2"></i></span>
<span class="headline">
Big
</span>
<span class="content">
Lorem ipsum dolor sit amet consectetur adipisicing
</span>
</label>
</div>
<div class="form-radio-s3">
<input class="form-radio-input-s3" name="s3" type="radio" id="formradios322">
<label class="form-radio-label-s3" for="formradios322">
<span class="virtual-rb"><i class="bi bi-check2"></i></span>
<span class="headline">
Big
</span>
<span class="content">
Lorem ipsum dolor, sit amet consectetur, elit
</span>
</label>
</div>
</div>