Search code examples
htmlcssbootstrap-4radio-button

How to add space between label and radio button? Bootstrap 4


I tried this solution but it didn't work, any advice how it can be achieved?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-4">
    <p>Signing on behalf of</p>
    <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
      </label>
    <label class="radio-inline" style="padding-left:15px;">
      <input type="radio" name="optradio" style="padding-left:15px;">An Individual
      </label>
  </div>
</div>

JSfiddle


Solution

  • input tag don't have closing tag, second wrap label inside span and give it a margin

    label span{
      display:inline-block;
      margin-left: 10px;
    }
    <div class="form-row">
       <div class="col-4">
          <p>Signing on behalf of</p>
          <label class="radio-inline" style="">
          <input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
          </label>
          <label class="radio-inline" style="padding-left:15px;">
          <input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
          </label>
       </div>
    </div>