Ok so... I was playing with buttons inside of a form, and I wanted to create a form with a question as a label and 3 radio buttons in front of the question (not below), and I wanted the buttons to be separeted from one another (not all together). and I wanted to be able to group the radio buttons inside of each row so that I'm able to choose one option from each row.
Something like this: (But without the actual "(x)", just the nice btn )
question: (x)button button button
question: button (x)button button
And so I wrote this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
test
</title>
<!-- ~~~~~~~~~~~~~~~~~~~~~BOOTSTRAP~~~~~~~~~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
html
{
font-size: 62.5%;
}
body
{
font-size: 14px; font-size: 1.4rem;
}
</style>
</head>
<body>
<br/>
<br/>
<br/>
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--no nned to add btn-group when inside a form-group-->
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
Jaguar
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- bootstrap scripts -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Which was everything I wanted. But...
The first thing I notice though was that the color darken when I cliked on the first choice from the first row but when I clicked on a button from the second row the first choice cleared again. That made me doubt, could it be that the radio buttons from the first row are not grouped and separeted from the second row??
And then while reviewing bootstrap info I notice I didn't used btn-group!!
... So I convinced myself that I could only choose one radio option from the 2 rows and I, definetly, didn't want that!!!!!
But oh I was so wrong!! When inside of a form you don't need btn-group (cause you've got form-group I reccon) and actually btn-group makes it more difficult to edit positions and sizes.
And to prove it here is some sample code, the aspect is very basic cause I'm not actually using btn display but it proves that without btn-group radial buttons will automatically group according to form-group:
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--Look ma no btn-group anywhere!!!!-->
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
Jaguar
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</form>
Further more if I tried to use btn-group, the display got all messed up. I played around with this configuration a lot and couldn't get the display I wanted. Here's a sample code using btn-group:
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--no nned to add btn-group when inside a form-group-->
<div class="btn-group" data-toggle="buttons">
<div class="col-md-2">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
<span syle="width: 7rem;">Jaguar</span>
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="btn-group" data-toggle="buttons">
<div class="col-md-2">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</div>
</form>
So to conclude.... wtf??? I'm a noob and in no way I can claim that btn-group is useless inside of a form. As a matter of fact I'm probably wrong. But this display of things confuses me and I couldn't find a correct way of using btn-group AND!! having the display of the form as I wanted it.....
Is form-group enough to group radial buttons?
Is btn-group actually not helpfull inside of forms?
is there a better way to include btn inside of a form and respecting the wireframe display I described?
Pretty please if some has an answer i would appreciate any response
