CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Builder
Builder

Reputation: 1056

html - Text align in DIV using bootstrap

Hi I am not a good UI HTML developer but have to do some fixes on a form. I am surprised that text align is not working on this form. I can see this HTML but don't know how to align text right on label StockEnd.

<div class="col-sm-1">
  <label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
  <div class="input-group">
    <input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
    <span class="input-group-btn">
      <button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
    </span>
  </div>
</div>

Upvotes: 0

Views: 108

Answers (3)

Builder
Builder

Reputation: 1056

After discussing with my colleague, we made this change and it worked as required. Just removed the class from outer Div and it worked. So Instead of 

<div class="col-sm-1">
  <label class="control-label col-sm-1" for="StockEnd">End</label>
</div>

it is now 

           <div >
                <label class="control-label col-sm-1" for="StockEnd">End</label>
           </div>

Rest is same no change.

Upvotes: 0

Serlite
Serlite

Reputation: 12258

This can be achieved with marginal adjustment to your HTML classes.

First, you must remove .col-sm-1 on your <label>, as this class causes a float:left to be applied to the element, which means any use of text-align will no longer affect it. With that class removed, you can then add .text-right to the parent of the <label>.

In the end, your HTML will look like:

<div class="col-sm-1 text-right">
  <label class="control-label" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
  <div class="input-group">
    <input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize="" typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
    <span class="input-group-btn">
      <button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
    </span>
  </div>
</div>

Here's a Bootply to demonstrate.

Hope this helps! Let me know if you have any questions.

Upvotes: 2

David Nguyen
David Nguyen

Reputation: 8528

either add text-right class to the parent form-group

OR

modify the label to be display: block with text-right class to do this.

Upvotes: 0

Related Questions