Search code examples
cssreactjsreact-bootstrap

Complex layout in react app : CSS or Bootstrap, or both?


I'm working on a react app, in which I use react-bootstrap to get some useful components. I'm fairly new to javascript and react and web development in general.

So I wanted to create a layout that appears to be rather complex to achieve with the Bootstrap Container, Row and Col elements alone: I needed a sidebar, and it looks that you cannot do this with raw Bootstrap, and you need to write custom css.

Managing both Bootstrap layout and CSS tends to overload my brain... I can see 3 ways of getting it done:

  • try to do it all with Boostrap components, no extra CSS (seems unrealistic to me)

  • use boostrap elements for layout, and tweak them with custom CSS

  • use only CSS for layout (Grid or Flexbox for instance - no Bootstrap components)

After googling around a lot, the last option seems the most manageable to me. Which way do you think is the most realistic for a newbie, and allows me to get what I want? Is there another solution I didn't think of?


Solution

  • As a newbie, I would say 100% to start with CSS and doing it custom yourself. You will have full control over the layout and what it is doing behind the scenes of bootstrap and if you want to update it, you know exactly how. When I started Web dev only 3 years ago, the first thing I learned in CSS (except the basics) was Flex and it has saved me. IMO, Work on learning CSS Flex and Grid and you will master them both together which will help you greatly working on the front end.