Align multi-line toggling radio buttons group in bootstrap 4

Question

I am trying to divide 4 radio buttons into two lines using bootstrap 4 alpha6, but I can't:

<div id="payment-table" class="row">
    <div class="col-12">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
                <img src="imgs/cash.png">
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
                <img src="imgs/visa.png">
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
                <img src="imgs/split.png" id="split">
            </label>
            <label class="btn btn-primary">
                 <input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
                 <img src="imgs/master.png">
            </label>
        </div>
    </div>
</div>

Here's what I get:

I tried to remove "btn-group" class, and I get:

And I can't align them to fit full width, as I want two radio buttons per line, and each line has full width with 50% for each radio button.

I tried to give each one "col-6", and here's what I get:

Any suggestion?

Answer 1

actually we need to use only col class. by nesting we determine how many columns will be there.

Try this

.btn-primary {
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
  <div class="col">
    <div class="" data-toggle="buttons">
      <div class="row">

        <div class="col">
          <label class="btn btn-primary active col">
                <input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
                <img src="imgs/cash.png">
            </label>
        </div>
        <div class="col">
          <label class="btn btn-primary col">
                <input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
                <img src="imgs/visa.png">
            </label>
        </div>
      </div>
    </div>
    <div class="row">

      <div class="col">
        <label class="btn btn-primary col">
                <input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
                <img src="imgs/split.png" id="split">
            </label>
      </div>
      <div class="col">
        <label class="btn btn-primary col">
                 <input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
                 <img src="imgs/master.png">
            </label>
      </div>
    </div>
  </div>
</div>

Hope this helps!