CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Anonymous
Anonymous

Reputation: 1990

bootstrap form checkbox not aligning properly

I have a bootstrap form.there are two checkboxes for gender.I am expecting them to align side by side of the text but these are not aligning properly.

<form class="form-block">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
            <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">username</label>
    <input type="text" class="form-control" id="username" placeholder="username">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
            <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
         GENDER   
  <div class="checkbox">
  <p> MALE 
    <input type="checkbox" name="checkbox" value="gender"></p>

      <p> FEMALE 
   <input type="checkbox" name="checkbox" value="gender"> </p>  



  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

here is jsfiddle link of my tried code.

Upvotes: 0

Views: 1694

Answers (3)

Aravind Suresh Thakidayil
Aravind Suresh Thakidayil

Reputation: 1193

Well first off, for selecting a sex you shouldn't use checkboxes, use radio buttons. That's so that your user can select their sex, instead of two sexes. Make it radios, and then it will be automatically aligned.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="password" >
  </div>
            <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
         GENDER   
  <div class="container-fluid">
    <input type="radio" name="sex" id="male"><label>Male</label>
<br>
    <input type="radio" name="sex" id="female" value="Female"><label>Female</label>
  </div>
            <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">date of birth</label>
date of birth    
                <input type="date" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default" name="submit" value="submit">submit</button>
</form>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

This is the standard format for bootstrap checkboxes. You also want the name to represent what this form group is about (gender), and the value to be what the selected checkbox represents (male/female)

GENDER   
<div class="checkbox">
  <label><input type="checkbox" value="male" name="gender"> MALE</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="female" name="gender"> FEMALE</label>
</div>

https://jsfiddle.net/r6ehhhtd/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="password" >
  </div>
            <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  
  
         GENDER   
<div class="checkbox">
  <label><input type="checkbox" value="male" name="gender"> MALE</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="female" name="gender"> FEMALE</label>
</div>


            <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">date of birth</label>
date of birth    
                <input type="date" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default" name="submit" value="submit">submit</button>
</form>

Upvotes: 1

Zack Kirby
Zack Kirby

Reputation: 169

I modified your code to wrap the checkboxes and their labels inside a label tag. Also, I moved the checkboxes to before the label text. See code below:

<form>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="password" >
    </div>

    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
    </div>
    GENDER   

    <div class="checkbox">
        <p> 
            <label><input type="checkbox" name="checkbox-male" value="gender"> MALE</label>
        </p>

        <p> 
            <label><input type="checkbox" name="checkbox-female" value="gender"> FEMALE</label>
        </p>  
    </div>

    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">date of birth</label>
        date of birth    
        <input type="date" class="form-control" id="exampleInputPassword3" placeholder="Password">
    </div>

<button type="submit" class="btn btn-default" name="submit" value="submit">submit</button>
</form>

Upvotes: 0

Related Questions