CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Jess McKenzie
Jess McKenzie

Reputation: 8385

Bootstrap 3 Checkbox Label

How can I add a label to my checkbox's so that I can have them inline.

I am wanting it like this:

label input input

Currently the code below is showing like input input label why?

HTML:

<div class="col-md-6 pull-right">
    <div class="form-group">
        <label>Gender</label> <label class=
        "col-sm-2 checkbox-inline"><input id="genMale" type="checkbox"
        value="genMale">Male</label> <label class=
        "col-sm-2 checkbox-inline"><input id="genFemale" type=
        "checkbox" value="genFemale">Female</label> 
    </div>
</div>

Upvotes: 1

Views: 23219

Answers (5)

bnahin
bnahin

Reputation: 816

The gender label is not within the grid. Add the class col-sm-2 to the label.

<label class="col-sm-2">Gender</label>

Here's a snippet:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="col-md-6 pull-right">
  <div class="form-group">
    <label class="col-sm-2">Gender</label>
    <label class="col-sm-2 checkbox-inline">
      <input id="genMale" type="checkbox" value="genMale">Male</label>
    <label class="col-sm-2 checkbox-inline">
      <input id="genFemale" type="checkbox" value="genFemale">Female</label>
  </div>
</div>

Upvotes: 5

Yevgeniy Svinolupov
Yevgeniy Svinolupov

Reputation: 21

MB You mean something like this?

 <div class="col-md-6 pull-right">
        <div class="form-group">
            <label>Gender</label> <br><br>
          
            <input id="genMale" type="checkbox"  value="genMale" name="male">
            <label for="male" class="col-sm-2 checkbox-inline">Male</label>
            <input id="genFemale" type="checkbox" value="genFemale" name="Female">
            <label for="Female" class="col-sm-2 checkbox-inline">Female</label> 
</div>

Upvotes: 0

G Naga Subrahmanyam
G Naga Subrahmanyam

Reputation: 308

You can do like. I think this will perfectly work for you.

Happy Coding :-) ;-) 

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Inline Check Box</h2>
  <form class="form-inline" role="form">
    <div class="checkbox">
     <label>Gender</label> 
     </div>
     
    <div class="checkbox">
      <label> Male <input type="checkbox"></label>
    </div>
    
     <div class="checkbox">
      <label> Female <input type="checkbox"></label>
    </div>
   
  </form>
</div>

</body>
</html>

Upvotes: 1

Mamun
Mamun

Reputation: 145

You can try this.

<label style="float:left;margin-right:15px;">Gender</label>

You can also try this....

<label class="pull-left">Gender</label>

Upvotes: 0

Anthony Matignon
Anthony Matignon

Reputation: 76

is this is what you need ? Or am i wrong ? You had the pull right, i deleted it

<div class="col-md-6">

Upvotes: 0

Related Questions