How can I make space between two buttons in same div

Question

What is the best way to horizontally space Bootstrap buttons   At the moment the buttons are touching    lt div class  btn-group  gt       lt button class  btn btn-inverse dropdown-toggle  data-toggle  dropdown  gt           lt i class  icon-in-button  gt  lt  i gt            Add to list          lt span class  caret   gt       lt  button gt       lt ul class  dropdown-menu  gt           lt li gt               lt a href     gt here lt  a gt           lt  li gt           lt li gt               lt a href     gt new lt  a gt           lt  li gt       lt  ul gt       lt button class  btn btn-info  gt           lt i class  icon-in-button  gt  lt  i gt            more      lt  button gt   lt  div gt       jsfiddle showing the problem  http   jsfiddle net hhimanshu sYLRq 4

User · Answer

I ended up doing something similar to what mark dibe did, but I needed to figure out the spacing for a slightly different manner.

The col-x classes in bootstrap can be an absolute lifesaver. I ended up doing something similar to this:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

This allowed me to align titles and input switches in a nicely spaced manner. The same idea can be applied to the buttons and allow you to stop the buttons from touching.

(Side note: I wanted this to be a comment on the above link, but my reputation is not high enough)

User · Answer

I used the Bootstrap 4 buttons plugin  https   getbootstrap com docs 4 0 components buttons  button-plugin  and added the class rounded to the labels and the class mx-1 to the middle button to achieve the desired look and feel of separate radio buttons  Using the class btn-toolbar made the radio button circles appear for me which is not what I wanted  Hope this helps someone             lt div class  btn-group btn-group-toggle  data-toggle  buttons  gt               lt label class  btn btn-secondary active rounded  gt                   lt input type  radio  name  options  id  option1  autocomplete  off  checked gt  Active              lt  label gt               lt label class  btn btn-secondary rounded mx-1  gt                   lt input type  radio  name  options  id  option2  autocomplete  off  gt  Radio              lt  label gt               lt label class  btn btn-secondary rounded  gt                   lt input type  radio  name  options  id  option3  autocomplete  off  gt  Radio              lt  label gt           lt  div gt

User · Answer

Dragan B  solution is correct  In my case I needed the buttons to be spaced vertically when stacking so I added the mb-2 property to them   lt div class  quot btn-toolbar quot  gt      lt button type  quot button quot  class  quot btn btn-primary mr-2 mb-2 quot  gt First lt  button gt      lt button type  quot button quot  class  quot btn btn-primary mr-2 mb-2 quot  gt Second lt  button gt      lt button type  quot button quot  class  quot btn btn-primary mr-2 mb-2 quot  gt Third lt  button gt   lt  div gt

User · Answer

You can use spacing for Bootstrap and no need for any additional CSS  Just add the classes to your buttons  This is for version 4

User · Answer

Put them inside btn-toolbar or some other container  not btn-group  btn-group joins them together  More info on Bootstrap documentation   Edit  The original question was for Bootstrap 2 x  but the same is still valid for Bootstrap 3 and Bootstrap 4   In Bootstrap 4 you will need to add appropriate margin to your groups using utility classes  such as mx-2

User · Answer

What Dragan B suggested is right way to go for Bootstrap 4  I have put one example below  e g  mr-3 is margin-right 1rem important   lt div class  btn-toolbar pull-right  gt      lt button type  button  class  btn mr-3  gt btn1 lt  button gt      lt button type  button  class  btn mr-3  gt btn2 lt  button gt      lt button type  button  class  btn  gt btn3 lt  button gt   lt  div gt    p s  in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right

User · Answer

Another way to achieve this is to add a class  btn-space in your buttons     lt button type  button  class  btn btn-outline-danger btn-space     lt  button gt     lt button type  button  class  btn btn-outline-primary btn-space     lt  button gt    and define this class as follows   btn-space       margin-right  15px

User · Answer

I actual ran into the same requirement  I simply used CSS override like this   navbar  btn-toolbar   margin-top  0  margin-bottom  0

User · Answer

you should use bootstrap v 4   lt div class  form-group row  gt       lt div class  col-md-6  gt           lt input type  button  class  btn form-control  id  btn1  gt       lt  div gt       lt div class  col-md-6  gt           lt input type  button  class  btn form-control  id  btn2  gt       lt  div gt   lt  div gt

User · Answer

if use Bootstrap  you can change with style like  If you want only in one page  then betwen head tags add      btn-group btn margin-right 1rem    If is for all the web site add to css file

User · Answer

The easiest way in most situations is margin   Where you can do    button    margin  13px 12px 12px 10px      OR  button    margin  13px

User · Answer

Just put the buttons in a class   class  btn-toolbar    as told by bro Miroslav Popovic It works awesome    x000D   x000D   lt div class  btn-toolbar  gt  x000D     lt button type  button  id  btnSubmit  class  btn btn-primary btn-sm  gt Submit lt  button gt  x000D     lt button type  button  id  btnCancel  class  btn btn-primary btn-sm  gt Cancel lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

[html] How can I make space between two buttons in same div?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap