How to align radio button and label, with Bootstrap 3.x?

Question

How to align radio button and label, with Bootstrap 3.x?

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

How to align the radio button with label , using Bootstrap 3.x ? I tried in many ways, but the "misalignment" remains.

radio{
width:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="col-md-8 text-info">
	<h4>1. Comprometimento</h4>
</div>
	<div class="col-md-4 text-info">
		<h4>AVALIAÇÃO</h4>
	</div>
	<div class="col-md-8">
		<p>Conhece e cumpre as normas estabelecidas na empresa</p>
	</div>
	<div class="col-md-4">
		<label for="comprom_perg_a" class="radio-inline control-label"> 
    <input type="radio" class="form-control" name="comprom_perg_a" value="7"> 07 </label>
		<label for="comprom_perg_a" class="radio-inline control-label">
    <input type="radio" class="form-control"  name="comprom_perg_a" value="8"> 08 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio" class="form-control" name="comprom_perg_a" value="9"> 09 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio" class="form-control"  name="comprom_perg_a" value="10"> 10 </label>
	</div>

Note: style was required because the radio button was overly large.

bootstrap-3 bootstrap

asked by anonymous 22.09.2017 / 21:22

2 answers

1

To edit anything in bootstrap I usually create an external css file and declare it after bootstrap.min.css , it would look something like:

<head>
  <link rel="stylesheet" src="css/bootstrap.min.css">
  <link rel="stylesheet" src="css/style.css">
</head>

From there, just edit the changes in css.

22.09.2017 / 21:53

Manipulating values through input hidden How to hide the iframe scroll bar?

score 2 · Accepted Answer

If you misuse the elements of the label , then what you are looking for is radio-inline Bootstrap v. 3.3.x .

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

That is, when you want them to appear on the same line, you should apply this class. But understand one thing: the class controls the radio element that is inside it, so the input radio style is already defined, and you can not apply another class to it (you are trying to apply form-control ).

If you look at the contents of bootstrap.css you will see this:

.radio-inline input[type=radio]{
    position:absolute;
    margin-top:4px;
    margin-left:-20px
}

So, use the main class radio-inline without calling form-control :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="text-info"><h4>1. Comprometimento</h4></div>
	<div class="text-info"><h4>AVALIAÇÃO</h4></div>
	<p>Conhece e cumpre as normas estabelecidas na empresa</p>
  
<div class="col-md-4">
		<label for="comprom_perg_a" class="radio-inline control-label"> 
    <input type="radio" name="comprom_perg_a" value="7"> 07 </label>
		<label for="comprom_perg_a" class="radio-inline control-label">
    <input type="radio"  name="comprom_perg_a" value="8"> 08 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio" name="comprom_perg_a" value="9"> 09 </label>
		<label for="comprom_perg_a" class="radio-inline"> 
    <input type="radio"  name="comprom_perg_a" value="10"> 10 </label>
	</div>
  
  
</div>