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

Asked

Viewed 3,720 times

0

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

radio{
width:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="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>
<div class="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: it was necessary to put the style, because the radio button was unreasonably large.

bootstrap-3 bootstrap

2 answers

3


If by "misalignment" you mean the elements are not on the same line that the label, then what you seek is class radio inline of 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 element radio that’s inside her, like, the style of radio input is already set, and you cannot apply another class to it (you are trying to apply form-control).

If you look at the content of bootstrap.css will see that:

.radio-inline input[type=radio]{
    position:absolute;
    margin-top:4px\9;
    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>
<script src="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>

1

To edit anything in bootstrap I usually create an external css file and declare it after the bootstrap.min.css, 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 in css the changes.

Browser other questions tagged bootstrap-3 bootstrap

You are not signed in. Login or sign up in order to post.