CODEWITHSUNDEEP
csstwitter-bootstrap
JQuery Mobile
JQuery Mobile

Reputation: 6301

Bootstrap - Align Content in Panel Header

I have an app that uses Bootstrap. This app has a panel element across the top that looks like the following:

<div class="panel panel-default">
  <div class="panel-heading chev">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#details" class="collapsed">
        <div>
          <div>Show Details</div>
          <div class="pull-right">
            Details Found: <span class="badge">5</span>
          </div>
        </div>
      </a>
    </h4>
  </div>
  <div id="details" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-3">
          <label class="control-label">Item</label>
          <select class="form-control">
            <option></option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

I am trying to have the "Show Details" text left-aligned and the "Details Found" text right-aligned within the panel title. However, at this time, the "Details Found" text is stacked below. The are arranged vertically. It's like pull-right is being ignored. What am I doing wrong?

Upvotes: 0

Views: 701

Answers (2)

jaunt
jaunt

Reputation: 5088

Why don't you use the <span> tag instead for the "Details" div and <div class="pull-right">?

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

<div class="panel panel-default">
  <div class="panel-heading chev">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#details" class="collapsed">
        <div>
          <span>Show Details</span>
          <span class="pull-right">
            Details Found: <span class="badge">5</span>
          </span>
        </div>
      </a>
    </h4>
  </div>
  <div id="details" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-3">
          <label class="control-label">Item</label>
          <select class="form-control">
            <option></option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7201

It may seem counterintuitive but do this instead: (put "Show Details" div after "Details Found" div)

<div class="pull-right">
    Details Found: <span class="badge">5</span>
</div>
<div>Show Details</div>

If you're floating an element (and that is what .pull-right class does), it has to go before the non-floated element for them to be in one line.

Upvotes: 2

Related Questions