Bootstrap radio button group float-right not working-CodePudding

I am trying to align right the bootstrap radio button group but not working. My code block given below.

<div >
              <span ><i ></i></span>

              <div >
                <span >Purchase</span>

                <div  data-toggle="buttons" style="width:50%">
                  <label >
                    <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
                  </label>
                  <label >
                    <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
                  </label>
                  <label >
                    <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
                  </label>
                </div>
               
              </div>
            
            </div>

CodePudding user response：

Your code is working. Maybe you did not link bootstrap properly.

Try this:

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
  <div >
    <span ><i ></i></span>
    <div >
      <span >Purchase</span>
      <div  data-toggle="buttons" style="width:50%">
        <label >
          <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
        </label>
        <label >
          <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
        </label>
        <label >
          <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
        </label>
      </div>               
    </div>           
  </div>

CodePudding user response：

Link bootstrap in head part and try

          <div >
            <span >Purchase</span>

            <div  data-toggle="buttons" style="width:50%">
              <label >
                <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
              </label>
              <label >
                <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
              </label>
              <label >
                <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
              </label>
            </div>
           
          </div>
        
        </div>

CodePudding user response：

Can you try this for Bootstrap v5.0

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<div >
  <div >
    <div >


      <div >
        <span ><i ></i></span>
        <span >Purchase</span>
      </div>
      <div  role="group" aria-label="Basic radio toggle button group">

        <input type="radio"  name="btnradio" id="btnradio1" autocomplete="off" checked>
        <label  for="btnradio1">Full Access</label>

        <input type="radio"  name="btnradio" id="btnradio2" autocomplete="off">
        <label  for="btnradio2">View Only</label>

        <input type="radio"  name="btnradio" id="btnradio3" autocomplete="off">
        <label  for="btnradio3">Restricted</label>

      </div>

    </div>

  </div>

</div>