Bootstrap text nowrap class not responsive

Question

I am using text-nowrap class for one of my labels to prevent it from wrapping in the normal desktop view. However when I try resizing the browser to check the responsiveness, it fails. The label goes behind my input field.

Below is my HTML code

<form role="form" class="form-horizontal">
  <div id="box" class="box-body" role="dynamic-fields">
     <div class="inline-form" id="inline-form">
        <div class="row clone">
           <div class="col-md-6">
              <div class="form-group">
                 <label style="" for="inputPackageName" class="col-sm-3 control-label">Package
                    Name </label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
              <div id="sample" class="form-group">
                 <!-- style="margin-left: -8%;" -->
                 <label for="inputApplicationName"
                 class="col-sm-3 control-label text-nowrap">Application Name</label>
                 <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputApplicationName"
                    placeholder="Package Name">
                </div>
                <button id="btn-close" class="btn btn-box-tool closebutton">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>
</div>
</form>

Any ideas as to how to fix this issue?

Answer 1

The Bootstrap .text-nowrap class is working exactly as intended. As you have added it to the label it's contents will not wrap to a new line even when the contained text exceeds the elements size. And this is what you want it to do on certain screen widths. If I understand correctly you just want it to behave differently (to not wrap) on certain display sizes. Unfortunately Bootstrap's CSS does not include breakpoint specific CSS classes for .text-nowrap class. You could implement your own specific CSS similarily to this:

@media (min-width: 576px) and (max-width: 992px) {
    .text-nowrap {
        white-space: normal !important;
    }
}

You can play around with the min-width and max-width properties as needed.