How to place radio buttons at the right end of the row using bootstrap 4?

Question

Now I tried classes .pull-right and .float-right to place my radio buttons at the right end. Its not working. Coding and Picture below.

<div class="row ">
  <div class="form-group col-lg-6">
    <div class="row">
      <label class="Bold">Is Valid</label> 
      <input class="radio-inline float-right" type="radio">Yes 
      <input class="radio-inline float-right"  type="radio" >No
    </div>
  </div>
  <div class="form-group col-lg-6">
    <div class="row">
      <label class="Bold">Is Checked</label> 
      <input class="radio-inline float-right" type="radio">Yes 
      <input class="radio-inline float-right"  type="radio" >No
    </div>
   </div>                                                                                                                
</div>

Screenshot

I want like the below image(just a sample)

Answer 1

You will need to wrap your radio buttons to a div .form-group and use [bootstrap4 flex utilities] classes d-flex justify-content-between to align them

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row ">
    <div class="form-group col-lg-6">
      <div class="d-flex justify-content-between">
        <label class="Bold">Is Valid</label>
        <div class="form-group">
          <input class="radio-inline" type="radio">Yes
          <input class="radio-inline" type="radio">No
        </div>
      </div>
    </div>
    <div class="form-group col-lg-6">
      <div class="d-flex justify-content-between">
        <label class="Bold">Is Checked</label>
        <div class="form-group">
          <input class="radio-inline" type="radio">Yes
          <input class="radio-inline" type="radio">No
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

You need to include bootstrap.min.css and wrap the radio buttons in <span> and give it float:right

.radio-group{
float:right;
}
.formrow {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row formrow">
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Valid</label> 
<span class="radio-group">
  <input class="radio-inline float-right" type="radio">Yes 
  <input class="radio-inline float-right"  type="radio" >No
</span>
 </div>
</div>
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Checked</label> 
<span class="radio-group">
  <input class="radio-inline float-right" type="radio">Yes 
  <input class="radio-inline float-right"  type="radio" >No
</span>
 </div>
 </div>                                                                                                                
 </div>