bootstrap row not working in react application

Hi, try ro re.ove the class col-12 from both divs and recheck.

Hi Zakaria,

I had removed col-12 from the sourcecode still the same results.

Ok bharath, try to resize the window of your browser and check if the row will be changed or not.

Does the _grid-framework.scss belongs to the bootstrap framework of it's a custom file?

Hi It is not working  I had tried resizing the browser. it is not working.

Hi When I click the grid framework file. it is reffering to bootstrap min.css Please see the screenshot for reference

Ok I see, do you have an accessible version that I could visit online to check what happen exactly?

Hi,

check the order of your CSS file priority as it seems that the class get overwrites..

Maybe you want to check this https://react-bootstrap.github.io/layout/grid/

Make sure you have the link for Bootstrap JS files too as they are required to make it work.

The Bootstrap grid layout module is a pure CSS functionality that does not require any JS code/file.

@Zakaria Based on the code provided by the questioner it seems a regular use of Bootstrap...

To my knowledge (I'm not a React expert but a Bootstrap expert) and without the JS part the DIV won't resized...

Not sure about this, could you please take a look at this bootstrap 4 sample that resizes with zero JS code:

https://jsfiddle.net/z_acharki/01f3s8xr/

Yes this is correct in some condition but when using other Jquery plugin chance are this won't  resize properly.
ie Modal and so on, as we don't see the whole code page it is hard to guess...

Anyway the Bootstrap CSS seems overwrites by some other CSS code, whitout seing the entire code we can only guess..

Yes agreed...

Hi,

I can start running the application when you message me.   so that you can identify where is the problem.  My application is a react application.
I am using bootstrap 4 with this react application. In this application I have 1000's and 1000's of images displayed as lots of cards (thumbnails- cards which are displayed with the help of flex) created with bootstrap 4.  it is working fine now.  Will there be any issues in the future.   Do you think will that create problems. or it is better to migrate to reactstrap or react bootstrap.  Or can I go with material UI.  which one is easy and best without issues. Please suggest me.

With Many thanks,
Bharath AK

Hi Bharath,

Bootstrap is fine and will help you move quickly,  the problem that could be appeared is the time that the page will take to load if you're loading all those images in the same time.

I would suggest the use of pagination or the infinite scrolling design pattern, you could choose one of the JS libraries, it will continue loading your cards to the interface as the user scrolls downwards.

Take a loop at https://infinite-scroll.com/

Hi Zakaria,

Could you Please suggest how to fix the row issue, both div's not in the same row for class row in HTML.   Do you think is it because of jquery.  How to resolve this issue?  Secondly, will there be any problem in future to use bootstrap with reactjs, becuase Jquery is part of bootstrap? Please help me in resolving these issues.

With Many thanks,
Bharath AK

Hi Zakari,

I had commented the jquery.min.js and bootstrap.min.js and tested the application.  still it (Div's) are not displayed in the same row.  both the two div's are occupying two rows.  Please help in resolve this issue.

With Many thanks,
Bharath AK

Hi All,

Thanks for providing me with ideas and thoughts.  At the start, I was with no ideas what to do?  After you people jump in I get more options and ideas from you to try and think.  Thanks for your help.

Kind Regards,
Bharath AK