Want to add spacing between buttons

Question

I have a simple task to add space between buttons in a dialog box like in the example code below obtained from http://bootboxjs.com/examples.html. Just imagine that there is more than 1 button is this example. Like save, delete, cancel, confirm.

bootbox.dialog({
        title: "This is a form in a modal.",
        message: '<div class="row">  ' +
            '<div class="col-md-12"> ' +
            '<form class="form-horizontal"> ' +
            '<div class="form-group"> ' +
            '<label class="col-md-4 control-label" for="name">Name</label> ' +
            '<div class="col-md-4"> ' +
            '<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
            '<span class="help-block">Here goes your name</span> </div> ' +
            '</div> ' +
            '<div class="form-group"> ' +
            '<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
            '<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
            '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
            'Really awesome </label> ' +
            '</div><div class="radio"> <label for="awesomeness-1"> ' +
            '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
            '</div> ' +
            '</div> </div>' +
            '</form> </div>  </div>',
        buttons: {
            success: {
                label: "Save",
                className: "btn-success",
                callback: function () {
                    var name = $('#name').val();
                    var answer = $("input[name='awesomeness']:checked").val()
                    Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");
                }
            }
        }
    }
);

I would like to know how to increase the spacing between the buttons so that they are placed more far apart and look spacious and the UI of the dialog box is more beautiful. I am not so good at these stuff. I have searched a lot. Please help me. Your help will be much appreciated. Thank you very much.

Please give some code and live example if possible. Thank you again.

Answer 1

You can use   or margin property to add spacing between buttons on a webpage.

Using   :

You can use   between the closing tag of first button and opening tag of second button just like shown below.

<button>Button 1</button> &nbsp;&nbsp;&nbsp; <button>Button 2</button>

you can add more   for adding more space.

Using margin attribute :

You can add spacing between two objects by adding margin on its sides. The CSS code is as follows,

.btn_name{
    margin-left:10px;
}

to add space on left side or you can add space on right side by using the following code,

.btn_name{
    margin-right:10px;
}