CODEWITHSUNDEEP
htmlcsslayout
Semi Developer
Semi Developer

Reputation: 161

Want to add spacing between buttons

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.

Upvotes: 14

Views: 102868

Answers (2)

Ionică Bizău
Ionică Bizău

Reputation: 113345

Another soltuion that may be quite elegant is to use {" "}. It is more readable than the cryptic &nbsp;. :)

<button>Button 1</button> {" "} <button>Button 2</button>

Upvotes: 2

Ronald Mathews
Ronald Mathews

Reputation: 2248

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

Using &nbsp; :

You can use &nbsp; 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 &nbsp; 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;
}

Upvotes: 43

Related Questions