HTMLHelp Forums > Exact alignment of Radio buttons in rows and columns

Full Version: Exact alignment of Radio buttons in rows and columns

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

anjali

Apr 29 2020, 11:38 AM

Hello All,

How do I align Radio buttons exactly in HORIZONTAL ROWS and at the same time exactly in VERTICAL COLUMNS. I have to align radio buttons in four rows. whenever the text is bigger, the radio buttons move to the right. If the text associated with radio button is shorter then radio buttons move to the left. I want them to be aligned properly in rows and columns.Below is my HTML:

CODE

<div class="row">
  <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">A</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">B</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3"> cccc</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">DDDDDDDDDDDDDDDDDDDDDD</label>
    </div>
  </div>

  <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">XXXXXXXXXXXXXXXXXXX</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">ssss</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">rrrr </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">sdsdsd</label>
    </div>
  </div>
      <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">jjjjjj</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">jjjj</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">rtrtrtrtrtrtrtrtrt </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">hhhhhhhh</label>
    </div>
  </div>
        <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">jjjjjj</label>
    </div>

  </div>
</div>

I am using Bootstrap to to do the alignment which is not working, but below is the link for that:

I dont have any other css used in the above code, but I can change the code with whatever CSS anyone want me to put in.

CODE

pandy

Apr 29 2020, 12:03 PM

The CSS would be helpful.

anjali

Apr 29 2020, 12:26 PM

QUOTE(pandy @ Apr 29 2020, 12:03 PM)

The CSS would be helpful.

I am only using bootstrap. I posted the link to bootstrap. I can put any CSS that you want me to because I cannot align the radio buttons till now.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.