Issue

This Content is from Stack Overflow. Question asked by N.K.Barman

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

<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>

Solution

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>

This Question was asked in StackOverflow by N.K Barman and Answered by Rizeen It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.