Cannot align static fields for Details page in Bootstrap - css

Question

I want to use label as used "Static Control" label on that page. However, although I use the same Bootstrap version, I cannot aligned my form controls like that (I want the label is right float, data fields is left float -side by side - and there is a ":" sign between them. Howwver, the result is as shown on the image below. Could you please have a look at my code and inform what is wrong?
The code on that page:
<div class="form-group">
<label class="col-md-3 control-label">Static Control</label>
<div class="col-md-9">
<p class="form-control-static"> email#example.com </p>
</div>
</div>
The code I use on my Razor page:
<div class="form-group">
#Html.LabelFor(m => m.Name, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
<br />
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Surname, new { #class = "form-control-static" })
</div>
</div>

Answer 1

You have two elements which equal 100% width plus the colon, so it pushes the value down a line. You'll need to just code the label instead of using an HtmlHelper to add the colon. Change it to this:
<div class="form-group">
<label class="col-md-3 control-label">#Model.Name:</label>
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>

Answer 2

Here is the final solution fixed the problem. Thanks a lot for all of your helps...
<style>
.col-sm-3 .control-label {
float: right !important;
margin-top: 0 !important;
}
/*Add colon ( : ) to the end of labels */
.col-sm-3 > label:after {
content: " :";
}
</style>
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Name, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Name)
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Surname)
</div>
</div>
<br />