Thomas Smyth Thomas Smyth - 9 months ago 56
CSS Question

Bootstrap Side by Side buttons in table

I'm trying to make two buttons that are side by side to go into a table that I'm displaying through a PHP file called within a Javascript, however I cannot get the buttons to go side by side correctly. I've tried various things people previously suggested, but with no luck. Any suggestions?

$data .= '<tr><td>'.$row['surname'].'</td><td>'.$row['forename'].'</td><td>'.$row['username'].'</td><td>'.$row['joined'].'</td><td>'.$row['rank'].'</td><td><button type="button" class="btn btn-block btn-primary btn-xs" onClick="ChangePassOpen(\''.$row['username'].'\')">Change Password</button><button type="button" class="btn btn-block btn-primary btn-xs" onClick="ChangeRankOpen(\''.$row['username'].'\')">Change Account Rank</button></td></tr>';

Or view webpage (Hit Go to show the table)


Answer Source
 class="btn btn-block btn-primary btn-xs"

btn-block class is going to make your buttons take up 100% of the space available and block the entire row (Bootstrap docs), so nothing else fits in it.

  1. Remove the btn-block class
  2. Add some css style rules to make the buttons more distinguishable and fit in better. I'd suggest adding some padding or a margin between the buttons.