Bootstrap radio button group float-right not working

N.K Barman 0
Viewed 46

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="info-box">
  <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>

  <div class="info-box-content">
    <span class="info-box-text">Purchase</span>

    <div class="btn-group btn-group-toggle float-right" data-toggle="buttons" style="width:50%">
      <label class="btn btn-xs btn-success active">
        <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
      </label>
      
      <label class="btn btn-xs btn-outline-secondary">
        <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
      </label>
      
      <label class="btn btn-xs btn-danger">
        <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
      </label>
    </div>
  </div>
</div>

twitter-bootstrap css
3 Answers

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 class="info-box">
    <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>
    <div class="info-box-content">
      <span class="info-box-text">Purchase</span>
      <div class="btn-group btn-group-toggle float-right" data-toggle="buttons" style="width:50%">
        <label class="btn btn-xs btn-success active">
          <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
        </label>
        <label class="btn btn-xs btn-outline-secondary">
          <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
        </label>
        <label class="btn btn-xs btn-danger">
          <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
        </label>
      </div>               
    </div>           
  </div>

Rizeen0

Can you try this for Bootstrap v4

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="row ">
  <div class="form-group col-lg-6">
    <div class="d-flex justify-content-between">


      <div class="info-box-content">
        <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>
        <span class="info-box-text">Purchase</span>
      </div>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">

        <label class="btn btn-secondary active">
          <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option2" autocomplete="off"> Radio
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option3" autocomplete="off"> Radio
        </label>
      </div>

    </div>

  </div>

</div>

RuchDi0

Link bootstrap in head part and try

          <div class="info-box-content">
            <span class="info-box-text">Purchase</span>

            <div class="btn-group btn-group-toggle float-right" data-toggle="buttons" style="width:50%">
              <label class="btn btn-xs btn-success active">
                <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
              </label>
              <label class="btn btn-xs btn-outline-secondary">
                <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
              </label>
              <label class="btn btn-xs btn-danger">
                <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
              </label>
            </div>
           
          </div>
        
        </div>
srilatha0
Related