Zero margin between labels in bootstrap modal

Question

I've using bootstrap labels in web page but in normal page its looking good but in modal there is no margin b/w two labels:

$('.task').dblclick(function (e) {
$('#Modal_Task_View').modal({keyboard: true, show: true});
});

/* Common styles for all types */
.task {
  padding: 10px 15px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-left-width: 10px;
  border-radius: 3px;
}
.task h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="task task-overdue" data-id="2">
    <div class="row">
        <div class="col-lg-9 col-md-8 col-sm-6 col-xs-12">
            <h4>Title 2 
                                (First Category)
                                <a href="javascript:;" title="View" class="task-view" id="2"><i class="fa fa-eye" aria-hidden="true"></i></a>
                <a href="http://www.fichtner.com:8080/tasks/create/2" title="Edit" class="task-view"><i class="fa fa-pencil" aria-hidden="true"></i></a>
            </h4> 
                        Assigned to :<span class="spn-actionee">
                 
                <label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
                 
                <label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
                        </span></div> 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <span class="pull-right">
                Due Date: 26-Jun-2017<br>
                Days Left: 0
            </span>
        </div> 
    </div> 
</div>

    <div class="modal" id="Modal_Task_View" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" ><div class="modal-backdrop fade in"></div>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title task_title">Task 2 Wishlist </h4>
                <label class="label task_status task-head-due">Due</label><label class="label label-info task_priority">Normal</label>
                <span class="pull-right"><label>Due Date : <span class="task_due_date">08-Jul-2017</span></label></span>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6">
                        
                    </div>
                    <div class="col-sm-6">
                         <label>Category : <span class="tc_name">Second Category</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <label>Description :</label>
                        <span class="task_desc">Description Description Description</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label>Assigned To :</label>
                        <span class="spn-actionee"><label class="label label-info" data-id="1">Standard</label><label class="label label-info" data-id="17">Ash Wilde(ACW)</label><label class="label label-info" data-id="2">admin admin(admin)</label></span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="list-group spn-linked"><a href="javascript:;" class="list-group-item active">Linked Tasks</a><a href="javascript:;" class="list-group-item" data-id="4">Title 4</a><a href="javascript:;" class="list-group-item" data-id="3">Title 3</a></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="list-group linked-docs"><a href="javascript:;" class="list-group-item active">Documents</a></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

The label class ".label" is an inline element by default so when you place two or more together there should be some space inbetween by default. This should also work inside a modal.

Also, you should not be using the <label> element for this. The <label> tag defines a label for an <input> element. Use a <span> instead.

Answer 2

This because of no line change or spacebar in modal have a look these two example

No Space/Line Change Example

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<span><label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label><label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label></span>

Line Change Example

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<span>
    <label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
    <label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
</span>

Answer 3

You can try this

#myModal .modal-body span.spn-actionee label {
    margin-right: 10px;
}

Hope it will helps you.