CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6679745
user6679745

Reputation:

Bootstrap 3 Panel Header with Buttons Set to Not Respect Parent Padding

Here's my fiddle to demonstrate what I have now:

<div class="panel panel-default">
  <div class="panel-heading clearfix">
    <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel Title</h4>
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-default">Button A</button>
      <button type="button" class="btn btn-default">Button B</button>
      <button type="button" class="btn btn-default">Button C</button>
    </div>
  </div>
  <div class="panel-body">
    Panel content.
  </div>
</div>

Normal Bootstrap 3 Panel Header with Buttons

What I want to happen is for the buttons to have the full-height of the panel (such that there is no space, top and bottom) and to have it move to the edge (such that there is no space on the right side).

I'm thinking of using negative margins and setting the height of the buttons, but that seems hacky? Is there no better way, a class, maybe, that I can use?

Upvotes: 1

Views: 912

Answers (1)

R4nc1d
R4nc1d

Reputation: 3113

Check out the fiddle

There is a padding on the panel-heading that you need to remove.

.option-button {
    height:100%;
}

.media-object {
    height: 50;
}
.panel-heading {
    padding: 0;
    }

<div class="panel panel-default">
  <div class="panel-heading clearfix">
    <h4 class="panel-title pull-left">Panel Title</h4>
    <div class="btn-group pull-right media-object">
      <a href="#" class="btn btn-default option-button">Button A</a>
      <a href="#" class="btn btn-default option-button">Button B</a>
      <a href="#" class="btn btn-default option-button">Button C</a>
    </div>
  </div>
  <div class="panel-body">
    Panel content.
  </div>
</div>

Upvotes: 2

Related Questions