CODEWITHSUNDEEP
htmltwitter-bootstrap
DAVIDSON-K
DAVIDSON-K

Reputation: 45

Moving checkbox label above checkbox

How do I got about moving the checkbox label above the checkbox?

At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewstats">
         View Statistics
         </label>
         <input type="checkbox" value="">
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewgraphs">
         View Graphs
         </label>
         <input type="checkbox" value="">
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewnotifications">
         View Notifcations
         </label>
         <input type="checkbox" value="">
      </div>
   </div>
</div>

Upvotes: 3

Views: 9538

Answers (2)

Dhruvil21_04
Dhruvil21_04

Reputation: 2189

You can change to structure as below because....

  1. It gives flexibility to place the label and checkbox as per your need.

  2. Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.

    In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.

    You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewstats">
           View Statistics<br>
           <input id="viewstats" type="checkbox" value="">
         </label>
         
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewgraphs">
           View Graphs<br>
           <input id="viewgraphs" type="checkbox" value="">
         </label>
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewnotifications">
            View Notifcations<br>
           <input id="viewnotifications" type="checkbox" value="">
         </label>         
      </div>
   </div>
</div>

Upvotes: 2

Shenole Latimer
Shenole Latimer

Reputation: 326

the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.

Your code would look like this...

HTML

<div class="row">
    <div class="col-md-2">
        <div class="form-group">
            <label for="viewstats">
                View Statistics
            </label>
            <br>
            <input type="checkbox" value="">
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="viewgraphs">
                View Graphs
            </label>
            <br>
            <input type="checkbox" value="">
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="viewnotifications">
                View Notifcations
            </label>
            <br>
            <input type="checkbox" value="">
        </div>
    </div>
</div>

Hope that helps!

Upvotes: 5

Related Questions