Bootstrap 4 radio button

Bootstrap 4 radio button

This Bootstrap 4 radio button design outlines the most important things you should do when creating a form in your website in order to improve your brand identity and customer satisfaction.

It covers Bootstrap 4 Radio Button Group, Radio Button Style, Stacked, Inline and Without labels Radio Button and More. Follow these practices to improve the brand identity to your website.

Radio button is a best way to make a single choice among many different options.

STACKED RADIO BUTTON

This is the default radio button. Any number of radios that are created will be vertically stacked and appropriately spaced with .form-check class by adding into your input element.
Follow the below example to understand in depth.

<div class="form-check">
<input class="form-check-input" type="radio" 
name="Radios" id="Radio1" value="Option1">
<label class="form-check-label" for="Radio1">
Option1
</label>
</div>

Bootstrap 4 stacked radio button component

See the Pen BOOTSTRAP 4 STACKED RADIO BUTTON by Prime Study Hub (@PrimeStudyHub) on CodePen.

Remember to follow these steps while creating a Radio Button.

• Include Bootstrap 4 CSS link to your website either by CDN or  your local repository that should be referenced in your website. For CDN, Use this URL: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
• Reference should be like this <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
• Add .form-check-input  class to your input radio element.
• Add value to your input radio element

CHECKED RADIO BUTTON

In order to set the radio button selected by default, you can simply add checked attribute to your input element.

<input class="form-check-input" type="radio" 
name="Radios" id="Radio1" value="Option1" checked>

RADIO BUTTON GROUP

To group radio buttons on the same horizontal row by simply adding .form-check-inline class to any .form-check input element.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" 
name="Radios" id="Radios1" value="option1">
  <label class="form-check-label" for="Radios1">
    Option1
  </label>
</div>

Bootstrap 4 radio button group component

See the Pen BOOTSTRAP 4 RADIO BUTTON GROUP by Prime Study Hub (@PrimeStudyHub) on CodePen.

WITHOUT LABELS

Include .position-static class to your radio input element that don't have any label text. Remember you can still provide some form of label by adding aria-label attribute to your input element.

<div class="form-check">
  <input class="form-check-input position-static" type="radio"
 name="Radios" id="Radios1" value="option1">
</div>

Note: If you don't add .position-static class to your input element, it won't display the radio when you have more than one radio button.

See the Pen BOOTSTRAP 4 WITHOUT LABELS RADIO BUTTON by Prime Study Hub (@PrimeStudyHub) on CodePen.

DISABLED RADIO BUTTON

To disable the action of your radio button, you need to include disabled attribute to your radio button input element like below,

<input class="form-check-input" type="radio" 
name="Radios" id="Radio1" value="Option1" disabled>

If you like to learn more about latest bootstrap information click here.

NEXT STEPS...

Increase your form identity by following the steps outlined above. Ask questions & get feedback on your work by using the below comment section effectively.