Bootstrap 3 panel header with buttons wrong position

Question

I am using Bootstrap 3 and I would like to add some buttons in panel header  on top-right corner  When trying to add them  they are show below title baseline   Code   http   bootply com 82631  What are the missing CSS I should add either to the title  panel heading  or buttons

User · Answer

The h4 element is displayed as a block  Add a border to it and you ll see what s going on  If you want to float something to the right of it  you have a number of options    Place the floated items before the block  h4  element  Float the h4 element as well  Display the h4 element inline    In either case  you should add the clearfix class to the container element to get correct padding for your buttons   You may also want to add the panel-title class to  or adjust the padding on  the h4 element

User · Answer

I m a little late to the game here  but the simple answer is to move the H4 AFTER the button div  This is a common issue when floating  always have your floats defined BEFORE the rest of the contents or you ll have that extra line-break problem    lt div class  panel-heading  gt       lt div class  btn-group pull-right  gt           lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt       lt  div gt       lt h4 gt Panel header lt  h4 gt   lt  div gt    The issue here is that when your floats are defined after other items  the float s top will start at the last line-position of the element immediately before it  So  if the previous item wraps to line 3  your float will start at line 3 too   Moving the float to the TOP of the list eliminates the issue because there are no previous elements to push it down and anything after the float will be rendered at the top line  assuming there is room on the line for all items   Example of correct and incorrect ordering and the effects  http   www bootply com HkDlNIKv9g

User · Answer

I would start by adding clearfix class to the  lt div gt  with panel-heading class  Then  add both panel-title and pull-left to the H4 tag  Then  add padding-top  as necessary   Here s the complete code    lt div class  panel panel-default  gt       lt div class  panel-heading clearfix  gt         lt h4 class  panel-title pull-left  style  padding-top  7 5px   gt Panel header lt  h4 gt         lt div class  btn-group pull-right  gt           lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt         lt  div gt       lt  div gt           lt  div gt    http   bootply com 98827

User · Answer

You are part right  with  lt b gt title lt  b gt  it looks fine  but I would like to use  lt h4 gt    I have put  lt h4 style  display  inline   gt  and it seams to work   Now  I only need to add some vertival align

User · Answer

I placed the button group inside the title  and then added a clearfix to the bottom    lt div class  panel-heading  gt     lt h4 class  panel-title  gt      Panel header      lt div class  btn-group pull-right  gt         lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt         lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt         lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt       lt  div gt     lt  h4 gt     lt div class  clearfix  gt  lt  div gt   lt  div gt

User · Answer

or this   By using row class       lt div class  row  gt      lt div class    col-lg-2  col-md-2 col-sm-2 col-xs-2  gt        lt h4 gt Panel header lt  h4 gt     lt  div gt    lt div class    col-lg-10  col-md-10 col-sm-10 col-xs-10   gt       lt div class  btn-group  pull-right  gt          lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt       lt  div gt        lt  div gt     lt  div gt   lt  div gt

User · Answer

In this case you should add  clearfix at the end of container with floated elements    lt div class  panel-heading  gt       lt h4 gt Panel header lt  h4 gt       lt div class  btn-group pull-right  gt           lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt       lt  div gt       lt span class  clearfix  gt  lt  span gt   lt  div gt    http   www bootply com NCXkOtIkD6

User · Answer

Try putting the btn-group inside the H4 like this     lt div class  panel-heading  gt       lt h4 gt Panel header      lt span class  btn-group pull-right  gt           lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt       lt  span gt       lt  h4 gt   lt  div gt    http   bootply com lpXoMPup2d

User · Answer

I ve found using an additional class on the  panel-heading helps    lt div class  panel-heading contains-buttons  gt      lt h3 class  panel-title  gt Panel Title lt  h3 gt      lt a class  btn btn-sm btn-success pull-right  href  something html  gt  lt i class  fa fa-plus  gt  lt  i gt  Create lt  a gt   lt  div gt    And then using this less code    panel-heading contains-buttons        clearfix       panel-title            pull-left          padding-top 5px             btn            pull-right

User · Answer

You should apply a  clearfix  to clear the parent element  Next thing  the h4 for the header title  extend all the way across the header  so after you apply clearfix  it will push down the child element causing the header div to have a larger height    Here is a fix  just replace it with your code      lt div class  panel-heading clearfix  gt        lt b gt Panel header lt  b gt          lt div class  btn-group pull-right  gt           lt a href     class  btn btn-default btn-sm  gt    Lock lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Delete lt  a gt           lt a href     class  btn btn-default btn-sm  gt    Move lt  a gt         lt  div gt      lt  div gt    Editted on 12 22 2015 - added  clearfix to heading div

[css] Bootstrap 3 panel header with buttons wrong position

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3