Precise positioning of radio buttons in rows and columns for perfect alignment

Is there a way to align Radio buttons in both HORIZONTAL ROWS and VERTICAL COLUMNS perfectly? I need to organize the radio buttons into four rows. The radio buttons are displayed like this:

https://i.sstatic.net/JjiOm.png

As the text length varies, the radio buttons seem to shift either left or right. I want them to maintain proper alignment in both rows and columns. Here is my HTML code snippet:

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

  <div class="col-lg-12">
    ...
  </div>
  
  <div class="col-lg-12">
    ...
  </div>

  <div class="col-lg-12">
    ...
  </div>
</div>

Your assistance in resolving this issue would be highly appreciated.

htmlcssbootstrap-4

Answer №2

Utilizing the bootstrap framework with the class="form-check-inline" attribute enables you to effortlessly create inline radio buttons.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

<div class="container">
<h1>Radio Buttons</h1>
<br>
<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">C</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">D</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">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">C </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">D</label>
</div>
</div>
</div>
</div>

</body>
</html>

I believe this solution will address your question. Thank you for reaching out!

Answer №3

I believe that by wrapping the classes around, you will achieve the desired result.

In order to maintain both horizontal and vertical alignment, it is necessary to set the width of the blocks and have them wrap to the next line when there is excess data.

You can experiment with the following approach:

.Align {
  display: flex;
  width: 100%;  
}

.form-check-inline {
  width: 22%; /* Ensuring fixed block size for all screens */
  border: 1px solid black;
  margin: 5px;
}

.form-check-label {
  padding:2px;
  overflow-wrap: break-word; 
  width: 90%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-12 Align">
    <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 Align">
    <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 Align">
    <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 Align">
    <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to maintain the value of variables across different HTML files?

Imagine having a scenario where a page is connected to a .js file. This file contains code that assigns a value to a variable like this: var foo; function bar() { foo = //value generated through user input } bar(); Now the goal is to move t ...

javascripthtml

What is the best way to position a title and subheading alongside an image?

I am currently working on developing a blog using php and html to enhance my coding skills. On my website, I have a special category where I display posts, the number of which can vary. Each post is composed of a title, a subheading, and a placeholder div ...

htmlcsstext-align

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries

Customizing CSS in apostrophe-cms Pro using TheAposPallete.vue

Just starting with apostrophe-pro and I've noticed a file named TheAposPallete.vue in the node_modules directory, located at \node_modules@apostrophecms-pro\palette\ui\apos\components This file contains the following CSS: ...

javascriptcssvue.jsapostrophe-cms

Encountering challenges when adjusting height based on screen size in Angular 6

Utilizing HostListener to adjust the height based on screen size works well. However, during page load, "event.target.innerHeight" returns undefined until the browser height is changed. To address this issue, the value needs to be initialized. Initially, i ...

javascriptjqueryangularjsangularbootstrap-4

Is there a way to change the background color of the body on click and have it applied throughout the entire site

Is there a way to change the background-color of the entire site and specific modal elements when a user switches between two radio buttons? Here is the HTML code for the radio buttons: <div class="btn-group btn-group-xs" data-toggle="buttons"> ...

javascriptjqueryhtmlcssbackground-color

The text's worth in the code of javascript

Having an issue with my code where I want to add a string to my Confirm() function in JavaScript but it's not working correctly. myData.setValue(i, 9, '<a href="'+scriptDelete+'" onclick="return confirm();" > Delete </a>&ap ...

javascripthtmldom

What is the method for configuring automatic text color in CKEditor?

https://i.sstatic.net/yEM3p.png Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Tr ...

javascripthtmlcssckeditoreditor

Bespoke animated angular material tabs

Having an issue with Angular Material tabs. I have managed to remove the "slide" effect, but I can't figure out how to modify or remove the black effect behind my tab. Can anyone offer some assistance? black effect 1 black effect 2 Here is a snippe ...

cssangularangular-material

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

Displaying text alongside variables within a foreach loop

I've created a custom script to manage a webpage that includes three checkboxes. Here is the HTML for the checkboxes: <input type="checkbox" value="Ex1" name="Check[]" />Ex1 <input type="checkbox" value="Ex2" name="Check[]" />Ex2 <inp ...

phpsqlmysqlhtml

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Display and conceal DIV Class from separate webpage document

I currently have two PHP files: index.php show.php - index.php <ul> <li><a href="show.php?id=1">Show Div 1</a></li> <li><a href="show.php?id=2">Show Div 2</a></li> <li><a href="show ...

phpjavascriptjquerycssajax

What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

At the current moment, it appears as follows: _______________________________________ | | | ___________ | | | | | | ______ | div | ______ | | |s ...

htmlcssalignment

Having trouble selecting elements that have been dynamically generated through an Ajax callback function

During an AJAX callback, I am trying to insert a DIV with a unique ID into another specific DIV called A. However, after each call, if the div with the given id is not found as a child element of DIV A, a new DIV is created and appended. Strangely, every t ...

javascriptjqueryhtmlajax

Table placement within a cell of a table

Seeking assistance with an issue I encountered, where the date of 12th March is combined with a table. Any suggestions on how to separate them? Screenshot: UPDATE:JFIDDLE ...

htmlcss

Percentage based control over text filling effect

I'm currently working on developing a text fill effect that will be controlled by a useState. Below is the text I am using: https://i.sstatic.net/TMLGlueJ.png I aim to have it filled from left to right based on a state, with the last letter of the i ...

cssreactjstailwind-csscss-animations

Center the ASP menu horizontally on the page

I'm having trouble centering the menu bar horizontally. The number of main menu items can change with each user login. Currently, the menu bar is starting around 30% from the left. I have attempted using display: inline-block and display: table for #m ...

htmlasp.netcss

Is it possible for us to view the code contained within a bootstrap class?

The button element has specific classes applied to it with <button class="btn btn-outline-primary">. I am curious about the code within the btn class. ...

htmlcssclassbootstrap-4frontend

Creating a hexagon shape with CSS is a challenge that many designers face

Does anyone know how to create a hexagon shape using an image without setting it as the background image using CSS? I tried the code below and it worked perfectly, but there's an issue when viewing it in emails. The background image doesn't displ ...

htmlcss