Position a radio button with image side by side within modal

Navigation
1

I am not able to solve the problem in which a radiobutton appears below the other. I want to place it to the right of the first one inside the modal.

This is how it appears to me:

And here is the HTML of that part: 

<div class="cc-selector">

        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />

        <label class="drinkcard-cc visa" for="visa">

              <img src="<?php echo $url; ?>vistas/img/plantilla/efectivo.png" class="img-responsive">

        </label>

        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />

        <label class="drinkcard-cc mastercard" for="mastercard">

              <img src="<?php echo $url; ?>vistas/img/plantilla/payu.png" class="img-responsive">   

        </label>

</div>

I know that by CSS I could do it by giving position: relative and modify it as I want, but I understand that directly by HTML must be able to also.

    
asked by Damian Ricobelli 29.11.2018 в 16:07
source

2 answers

2

What you need is to section your div in columns in the following way 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
      TU IMAGEN
    </div>
    <div class="col-md-6">
      <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
      OTRA IMAGEN
    </div>
  </div>
</div>

Bootstrap has a definition where each div equals 12 columns, which you can section through the class col ; in this case you only need to divide your div into 2 which would correspond to a col-6 (the specification of md , sm , lg serves for the resolution of each device)

    
answered by 29.11.2018 / 16:10
source
0

Try using the bootstrap grid system.

You only have to put each image inside a col-6 so that it takes 50% of the width: 

<div class="cc-selector">
    <div class='row'>

        <div class='col-md-6'>
            <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
            <label class="drinkcard-cc visa" for="visa">
                  <img src="<?php echo $url; ?>vistas/img/plantilla/efectivo.png" class="img-responsive">
            </label>
        </div>

        <div class='col-md-6'>
            <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
            <label class="drinkcard-cc mastercard" for="mastercard">
                  <img src="<?php echo $url; ?>vistas/img/plantilla/payu.png" class="img-responsive">   
            </label>
        </div>

    </div>
</div>
    
answered by 29.11.2018 в 16:14
How do I execute a script from tkinter without the window crashing? How to create an unordered list with a point at the beginning of each new line?