row and col classes are not expending the entire available width unless using form or p elements

Question

I keep getting strange behaviors when using bootstrap in the application I'm working on. This is the first time I encounter such behavior.

Here's the HTML

<div class="row" style="background-color: blue; padding: 2rem; width: 100%;">
  <div class="col-6" style="background-color: yellow;">
    <label for="useProdAddress">
     <input type="checkbox"id="useProdAddress">
     Use Producer Address
    </label>
  </div>
  <div class="col-6" style="background-color: orange;">
   <button class="btn btn-outline-secondary">
    Add Address
   </button>
  </div>
 </div>

As shown in the above screenshot, the entire contain occupies like the 1/3 of the page. adding width = 100% didn't make any different.

However, those are working

• using px or rem for width makes the div.row wider.

• using p or form elements

   <div class="col-6" style="background-color: orange;"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p> </div>

I don't know whether the reason is that I'm using the nav angular-bootstrap component.

<div class="d-flex">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="vertical">
    ...
    <li ngbNavItem="locations">
        <a ngbNavLink>Locations</a>
        <ng-template ngbNavContent>
            <app-locations></app-locations>
        </ng-template>
    </li>
    ...
</ul>

<div [ngbNavOutlet]="nav" class="ms-4"></div>

Thanks for helping

Answer 1

Try putting the width style first. <div class="row" style="width: 100%; background-color: blue; padding: 2rem;">