CODEWITHSUNDEEP
csstwitter-bootstrapcheckboxpanel
Salmonela
Salmonela

Reputation: 95

How to set inline check box in a bootstrap panel header

How can I set this bootstrap check box to be in the same line as the panel heading?

<div class="panel panel-info">
    <div class="panel-heading">some heading
        <div class="checkbox">
            <label>
                <input type="checkbox"> check me
            </label>
        </div>
    </div>
</div>       
<div class="panel-body">
</div>

Here is the fiddle http://jsfiddle.net/Rr7qf/

Upvotes: 1

Views: 11070

Answers (2)

Markus
Markus

Reputation: 3353

As rnirnber mentioned, a div is ablock element by default. You can override this behaviour. This should do the trick:

<div class="checkbox" style="display: inline">

update:

<div class="panel panel-info">
   <div class="panel-heading">Panel Heading
      <div class="checkbox" style="display:inline">
         <label>
             <input type="checkbox" style="float:inherit;"/>check box
         </label>
      </div>
  </div>
</div>       
<div class="panel-body">
</div>

Upvotes: 1

rnirnber
rnirnber

Reputation: 615

Your checkbox is on a new line because it's wrapped in it's own <div> tag. By convention, <div> elements have a default display: block property.

Block elements go on their own line, end of story. You should look into floats or possibly (even more easily) just getting rid of the unnecessary div.

Upvotes: 0

Related Questions