CODEWITHSUNDEEP
htmltwitter-bootstrapcss
aftab
aftab

Reputation: 545

How to make text in one line inside label with bootstrap columns?

Below label text is going in two lines.

How can I make label in one line without changing bootstrap columns as implemented below.

labels.html

<div class="form-group col-md-6 fieldHeight">
    <label for="erh" class="col-md-5 required">Enterprise Reporting Hierarchy:</label>
    <div id="multiDropDownDiverh" class="dropdown col-md-7">
        <input type="text" class="form-control" id="erh" ng-model="nonPersistentProcess.erhKey">
    </div>
</div>

Upvotes: 3

Views: 11950

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

Bootply : http://www.bootply.com/Pf86x2BEhn

HTML :

<div class="form-group col-md-6 fieldHeight">
    <label for="erh" class="no-space-break col-md-5 required">Enterprise Reporting Hierarchy:</label>
    <div id="multiDropDownDiverh" class="dropdown col-md-7">
        <input type="text" class="form-control" id="erh" ng-model="nonPersistentProcess.erhKey">
    </div>
</div>

Just add this Css :

.no-space-break{
    white-space:nowrap;
  }

Another example with ellipsis : http://www.bootply.com/VRTxn5yiGH

Css : 

.no-space-break{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
  }

Upvotes: 11

Related Questions