Two Bootstrap button side by side

Question

I want to have a Submit and Cancel button next to each other, maybe 5 pixels in between. I wrote this that you can see in Live code:

http://www.bootply.com/Y3t35NGADa

But the distance between the two buttons is a lot ! I want them much closer to each other. I did try setting padding-right or margin-right on the Submit button but did not do anything!

Answer 1

It is because u have given col-xs-4 that's why two buttons are taking 4 column space.

Option 1: Here is your answer

            <div class="col-xs-1">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
            </div>

            <div class="col-xs-1">
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>

        </div>

OPtion 2: Place the two button next to each other

<div class="row">

                <div class="col-xs-4">
                    <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
                  <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

Answer 2

you can do this with bootstrap class button-group.

<div class="button-group ">                
                 <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>               
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>           
 </div>