SPFx webparts issue when bootstrap is included

[loksayi]

Hi Team,

We are having a issue with web parts that were developed with ReactJS/no javascript framework with Bootstrap 4 in our SharePoint online sites due to the out of the box elements using class row (which will have display:flex for class row in bootstrap 4). These web parts were working fine up to last month. After updates to the modern pages from microsoft, we are facing this issue now(Refer the image which has tiles that looks shrinked)

<div class="a_f_50a7110f a_f_50a7110f root-81 CanvasZone row CanvasZone--alignment CanvasZone--noMargin CanvasZone--read"
    data-automation-id="CanvasZone">

 When we override some of the out of the box classes through script editor, it works and looks fine as below :

It's also affecting out of the box web parts in the same page. Can someone please provide an solution/update on it ?

Regards,

Loksayi

[#2]

Hello team,
Any one able to replicate this issue from your end ? Any solution from Microsoft or Should we change override bootstrap framework in all our web parts ? Kindly provide an update.

[#3]

@loksayi I have solved the issue by inserting the following Css in my SPFX webpart:

File: style.css

File content

div > div.CanvasZone--fullWidth > div {

  width: 100%;

}

Import the css file

I have also tried to inject custom script via a dedicated webpart but it does not work. Css must be injected by your SPFX webpart