CODEWITHSUNDEEP
angularbootstrap-4angular-ui-bootstrapangular8
JensB
JensB

Reputation: 6880

How to center ngb-timepicker in a col-nn

I have a time picker component in Angular 8, with bootstrap 4. I'm trying to center a ngb-timepicker in a col-12 inside this component.

<div class="row pickerContainer"> 
  <div class="col-12 pickerCenterer">
    <h2>Title</h2>
    <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
    <hr>
    <pre>Selected time: {{time | json}}</pre>
  </div>
</div>

.pickerContainer{
  text-align:center;
}
.pickerCenterer{
  display:inline-block;
  margin:0 auto;
}

This results with text being centered, but not the time picker. Stackblitz example here: https://cqutyi.run.stackblitz.io/

enter image description here

How do I center the time-picker itself?

Upvotes: 0

Views: 1224

Answers (1)

Allabakash
Allabakash

Reputation: 2027

You can make use of row class instead of col-12 like below.

<div class="row pickerContainer"> 
  <div class="row pickerCenterer">
    <h2>Title</h2>
    <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
    <hr>
    <pre>Selected time: {{time | json}}</pre>
  </div>
</div>

Demo is here - https://stackblitz.com/edit/angular-zzvzn7

Upvotes: 1

Related Questions