If statement in razor results on 2 columns merging into one

Question

Below I have a grid layout in Razor.

The last 2 col should be between two separate cols... but it appears that the IF statement's are resulting in combining both the bottoms cols into one.

Am I doing this wrong?

It worked with just the second col to last col, but when I added the latest (at the bottom) - it is merging them now.

Here below, you'll see the code, and I attached a screen shot of what it looks like.

<div class="list-group container" id="JobRequestMonitorTable">
<div class="row list-group-item list-group-item-heading container divTableHeading">
    <div class="col-md-4"> Job Code </div>
    <div class="col-md-5"> Description </div>
    <div class="col-md-2"> Schedule </div>
    <div class="col-md-1"> Running </div>
    <div class="col-md-1"></div>
</div>
@if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
    <div class="row list-group-item-danger">
        <div class="col-md-1 text-center">@ViewBag.ErrorMessage</div>
    </div>
}
@foreach (var item in Model.JobRequests)
{
    <div class="row list-group-item container">
        <div class="col-md-4">@item.JobCode</div>
        <div class="col-md-5">@item.Description</div>
        <div class="col-md-2">@item.Schedule</div>
        @if (@item.IsRunning == true)
        {
            <span class="glyphicon glyphicon-ok"></span>
        }
        <div class="col-md-1  text-break"></div>
        @if (!item.IsRunning)
        {
            <span class="glyphicon glyphicon-list-alt"></span>
        }
        <div class="col-md-1"></div>
    </div>
}

To clarify: I want these two cols to be SEPERATE cols:

           @if (@item.IsRunning == true)
        {
            <span class="glyphicon glyphicon-ok"></span>
        }
        <div class="col-md-1  text-break"></div>
        @if (!item.IsRunning)
        {
            <span class="glyphicon glyphicon-list-alt"></span>
        }
        <div class="col-md-1"></div>

Answer 1

You could add an empty icon if the item isn't running:

@if (@item.IsRunning == true)
{
    <span class="glyphicon glyphicon-ok"></span>
}
@else
{
    <span class="glyphicon"></span>
}

Answer 2

You need to put the <span> tags inside the <div> tags, which is what is defining your columns. You'll also need to probably change the item.Description column to col-md-4 , as Bootstrap has a maximum of 12 columns across (each col being width: 8.3333% ).

<div class="col-md-1  text-break">
    @if (@item.IsRunning == true)
    {
        <span class="glyphicon glyphicon-ok"></span>
    }
</div>
<div class="col-md-1">
    @if (!item.IsRunning)
    {
        <span class="glyphicon glyphicon-list-alt"></span>
    }
</div>