CODEWITHSUNDEEP
cssangularhtmlangular5
Abhishek Gautam
Abhishek Gautam

Reputation: 1767

How to align the div in same row in angular 5 using bootstrap classes

// here is input field with the label, "WLC Name" I want to align in the same row.

        <div class="form-group row">
            <label class="col-md-2 col-form-label text-right">WLC Name</label>
           <div class="col-lg-2 col-sm-11">
          <input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name"                                            id="wlc_name" #wlcname>

// I want to put below div in the same row, but it is not coming.
    <div>    
      <app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
     </div>
    </div>

// html code for the tag : app-right-tooltip 

  <div>
        <span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
              popoverPlacement="right"
              [popoverOnHover]="false"
              [popoverCloseOnMouseOutside]="false">
        </span>
  </div>

snapshot

Upvotes: 1

Views: 2452

Answers (2)

windmaomao
windmaomao

Reputation: 7671

You need to float app-right-tooltip

<app-right-tooltip style="float:right"></app-right-tooltip>

Otherwise, you need to have some structure to wrap this component

<div class="row">
    <div class="md-2">...</div>
    <div class="md-10"><app-right-tooltip /></div>
</div>

Upvotes: 1

The Oracle
The Oracle

Reputation: 2503

Try this css

.exampleClass {
   dispaly: inline-block;
}

Html

<div class="exampleClass">    
  <app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
 </div>

Upvotes: 0

Related Questions