CSS bootstrap not working in Angular sub componenet

I am facing an issue while including my child component in my parent component in Angular 8. My child component contains only a drop down. Now when I am including the same in the parent component and the css used in the div of parent component then the display output is coming as expected.

Parent Component :

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <div class="col-sm-5">
      <app-country >
      </app-country>
    </div>
  </div>
</div>

Child Component

<select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
  <option *ngFor="let province of countryDetails.details" value=>
    
  </option>
</select>

But now to reduce the coding planned to move the div class="col-sm-5" in the child component.

New Coding which is not working:

Parent Component:

 <div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
        <app-country></app-country>
      </div>
    </div>

Child Component:

<div class="col-sm-5">
  <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
    <option *ngFor="let province of countryDetails.details" value=>
      
    </option>
  </select>
</div>

In the second part if I extend the output HTML though the Web Console then found that the CSS is included in the code but then behavior is different.

Also note that I am using boot strap css.

Any help would be appreciable.

from CSS bootstrap not working in Angular sub componenet