Radio Button Inline Bootstrap Example

  • 11-11-2022
  • 947
  • Bootstrap
  • Haresh Chauhan

Radio inline bootstrap class .form-check-inline for the latest bootstrap versions 4 and 5. If you want to inline your form radio button as well as checkbox, this post will help you to make a sequent inline your radio button and checkbox.

This post will help you to make your radio button and checkbox input field inline, This post will help you to make your radio button and checkbox inline with the different versions in the bootstrap.

How to make an inline radio button and checkbox using bootstrap, below-given code with the example just copy according to your version and check the field name according to your use that's it.

Bootstrap Older Version

If you using an older version of bootstrap, The bootstrap class little bit different from the new version of bootstrap. If you want to make your radio button field input inline, Copy this example code and paste it into your form. This is a repayment example. You just change the name and id according to your input radion field name.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Inline Radio Button Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
     <form>
          <label class="radio-inline">
               <input type="radio" name="optradio" checked>Option 1
          </label>
          <label class="radio-inline">
               <input type="radio" name="optradio">Option 2
          </label>
          <label class="radio-inline">
               <input type="radio" name="optradio">Option 3
          </label>
     </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 4 & 5 CHECKBOX

Checkbox inline input field example. If you are using bootstrap version 4 or the latest version. Then the class name little bit different from the older version. To sequence the checkbox button in your form for the checkbox use the ".form-check-inline" class in your parent div tag of the input checkbox field.

<div class="form-check form-check-inline">
     <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
     <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
     <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
     <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
     <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
     <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

Bootstrap 4 & 5 RADIO

Radion button inline. Using bootstrap version 4 and the new latest version use the .form-check-inline class name for the inline radio button. Copy below code example and paste it into your form. This example is for the radio button. You just change names and ids according to your use in the form.

<div class="form-check form-check-inline">
     <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
     <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
     <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
     <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
     <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
     <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :