Should I use CSS, Bootstrap, or a combination of both for a complicated design in a React app

I am currently developing a react app and utilizing react-bootstrap to incorporate various components. As someone who is new to javascript, react, and web development as a whole, I find it challenging at times.

My goal was to create a layout that seemed quite complex to achieve using just the Bootstrap Container, Row, and Col elements. Specifically, I needed to include a sidebar, which doesn't seem possible with standard Bootstrap components without writing custom CSS.

Juggling both Bootstrap layout and custom CSS can be overwhelming for me. I have considered three different approaches to tackle this challenge:

  • Attempt to utilize only Bootstrap components without any additional CSS (though this seems impractical)

  • Use Bootstrap elements for the layout and customize them with custom CSS

  • Rely solely on CSS for the layout using Grid or Flexbox, without incorporating any Bootstrap components

After conducting extensive research, I believe that relying entirely on CSS for the layout appears to be the most feasible option for me. Which approach do you think is the most realistic for a beginner like myself, while still enabling me to achieve my desired outcome? Are there any other solutions that I may not have considered?

Answer №1

For newbies venturing into web development, my recommendation is to begin with CSS and create custom styles yourself. This way, you will have complete control over the layout and understand the inner workings without relying on frameworks like bootstrap. Learning CSS Flex and Grid early on in my journey as a web developer has been incredibly beneficial for me. Mastering these tools together will greatly enhance your front-end development skills.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on tallying the frequency of items in a state array

I'm currently working on an application in which clicking a button adds the item's value to the state. The button is clickable multiple times, allowing the same item to be added multiple times in the state array. My current code snippet: export ...

React isn't showing the image

While working on my React website, I encountered an issue where my local image is not displaying. I am using props to pass properties from Cards.js to CardItem.js and everything displays correctly except for the image. I'm not sure what the problem co ...

What is the best way to include numerous events within a single tag?

Currently, I am working on creating a timer that counts down with this React functional component provided below. import {useEffect, useState, useRef} from 'react' function Timer() { const [countdown, setCountdown] = useState(10) con ...

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Is there a way to customize the color of the blue buttons, text, and date indicator in the native datetime picker for Chrome using CSS? https://i.stack.imgur.com/eZSaE.png ...

Refusing to include two values due to the presence of a comma in JavaScript

I'm trying to add two values with commas and .00 (Example: 1,200.23 + 2,500.44) but it's not working because the textbox includes commas as required by my system. The result shows NaN because the comma is considered a special character. It was w ...

Adjusting nearby parts when hovering in CSS

I'm curious as to why the size of the second div does not change when hovering over the third div, unlike when hovering over the first div. #block { width: 50%; white-space: nowrap; } .div { display: inline-block; text-align: center; } di ...

The page is unable to display the data retrieved from the API in Next.js source code

When I fetch data from an API using getServerSideProps with React Query, everything works fine. However, the page source only displays "Loading...", which is not ideal for SEO purposes. Even though I am not utilizing the useEffect Hook, pagination functi ...

Tips for creating Material UI elements using React and Typescript

I am looking to extend a component from the Material UI library by creating a custom component that encapsulates specific styles, such as for a modal wrapper. However, I feel that my current solution involving the props interface may not be ideal. Is the ...

jQuery accordion's visibility``onChange in jQuery accordion``

Currently, I am in the final stages of developing my custom Jquery accordion. However, I am facing a challenge with having it start in a closed position without explicitly using $(".wrap-faq li p").slideUp(); before the function, as it automatically slid ...

Experimenting with Enzyme and Jest for testing the functionality of Material-UI's Select control

Encountering a challenge with testing Material-UI select option. Attempted to ensure all options are loaded in the control, yet when using console log debug, nothing appears on the options elements. Noticed that the menu items for Material-UI render at th ...

Excessive image display | HTML and CSS synergize

I am having some trouble with my image gallery. Each image is displayed as a vertical column and has zooming effects when hovered over. Clicking on an image should show it in full screen with a caption. The problem arises when dealing with images that are ...

The Javascript navigate method has detected an incorrect language being used

Currently, I am facing a challenge while developing a React JS website related to the navigator issue. Even though my default browser is Chrome and English is set as the language preference, when I check navigator.language it displays "he-IL" instead of En ...

What is the best way to adjust the placement of the menu icon on a webpage when utilizing a material-ui menu component?

On the attached image, the menu icon is currently displayed on the left side of the page, but I need it to appear on the right side. I've attempted to style both the div and the icon element without success. Despite extensive research online, I have ...

The ID provided does not match the format of a Function Type

Click here for the image import {MongoClient, ObjectId} from "mongodb"; async function handler(req, res){ if(req.method === "POST"){ const data = req.body; const client = await MongoClient.connect("mongoDB URL&q ...

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is m ...

Fixed width layout in Bootstrap 3 with a footer that spans the full width of the

Currently, I am utilizing Bootstrap 3 with a fixed width set-up. The footer on my site consists of two columns, each with a different background color. In order to ensure that the content in the footer aligns properly with the rest of the website, I want ...

Ways to avoid slider label overlap issues in Material UI?

https://i.stack.imgur.com/UBT3U.png I am using a slider in MUI to display the current percentage fetched from an API with an emoji, but when it reaches close to 75%, the labels overlap on mobile devices. Is there a way to move just the emoji label above t ...

Having issues with unexpected token in Typescript while using "as HTMLElement" type?

I recently started learning Typescript and I encountered an error while using the HTMLElement type in a forEach loop: ERROR in ./app/javascript/mount.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/me/projects/m ...

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...