Check out the code display here:
Here's what I aim for it to show
The alignment of the elements has been a real challenge for me. I just can't seem to get the "Gender:", "Gender RadioButton list", "Age:", "Age RadioButton list" to appear in 4 columns on a single row. Since there will be multiple survey questions, I need to design the layout using CSS.
Where or how can I learn to properly utilize the <Div class="col">? It feels like learning another language to me.
.form-container {
/* Styles for form container */
}
.form-container .RadioArray {
/* Styles for Radio Array */
}
.form-container .RadioBox {
/* Styles for Radio Box */
}
.form-container .spread {
/* Additional styles */
}
h4 {
/* Heading styles */
}<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unique-bootstrap-css-link.css">
<link rel="stylesheet" href="https://unique-bootstrap-icon-font.css">
<link rel="stylesheet" href="PlayRoom.css" type="text/css">
<title>PlayRoom</title>
</head>
<body>
<h4>Optional</h4>
<div class="form-container">
<div class="RadioArray">
<div class="row">
<div class="col-sm-5">
<!-- Gender section -->
</div>
<div class="col-sm-5">
<!-- Age section -->
</div>
</div>
</div>
</div>
</body>
</html>