Question 260824 in Html Question posted in
Some basic documentation can be found here.

How to use html/css in react/bootstrap?

How to use code of html/css in react/bootstrap?

Code in react js using bootstrap
How to use components and props?
It is showing errors even after installing bootstrap.

Can we use html/css code directly into react files into different folder..

how do we need to apply bootstrap to it.

please guide me through it.

Tags:

3

Answers


  1. 0

    Sure, let’s break it down into simple steps:

    1. Create a New React App: First, make a new React app if you don’t have one already. Think of it like creating a new project folder.

    2. Install Bootstrap: Imagine it’s like getting a new tool. You can install Bootstrap, which is a handy set of styles and components for your app.

    3. Import Bootstrap CSS: It’s like telling your app to use those new styles. You import the Bootstrap styles into your app so it knows how to look nice.

    4. Create React Components: Think of these like building blocks for your app. You can make separate files for things like headers and footers to keep your code organized.

    5. Use React Components: Now, you can put those building blocks into your app. For example, you can add a header and a footer to your main app page.

    6. Custom CSS: If you want to make things look even more special, you can create your own styles in CSS files and use them in your components.

    7. Passing Props: Imagine props as messages you send to your components. You can tell your components what to show by passing them these props.

    8. Handling Events: If you want your app to react when someone clicks a button or does something, you can use event handling, just like you do in regular HTML.

    9. Remember the Structure: In React, components should always give back one main thing. If you want to show multiple things, you put them inside a container.

    By following these steps, you can use HTML, CSS, and Bootstrap in your React app. You can also make cool components, send messages to them, and make them do things when someone interacts with your app.

    Login or Signup to reply.
  2. 0

    I am going to write steps down here:

    1. Create react app first using

    npx create-react-app my-app
cd my-app

    2. Next install bootstrap in it not react-bootstrap

    npm install bootstrap

    3. Now import bootstrap CSS into your entry file so that index.js file

     import 'bootstrap/dist/css/bootstrap.css';

    4. Now you can use bootstrap classes into your code as given here

    import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React with Bootstrap!</h1>
      <button className="btn btn-primary">Click Me</button>
    </div>
  );
}

export default App;

    5. Now you can pass the data to by creating your components as shown below

    import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.description}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <MyComponent title="Component Title" description="This is a custom component." />
    </div>
  );
}

export default App;

    Along with bootstrap classes you can also use your custom CSS. You need to import your custom css files as you imported bootstrap css file.

    Hopefully, this will help you. Feel free to ask questions.

    Login or Signup to reply.
  3. 0

    The previous answers assume that you will be using CSS as your primary language for writing styles, which may not be what you want.

    The reasons why you may not want to import a CSS file are:

    • you may not want to have your app come with a huge stylesheet where the vast majority of the rules are not used.
    • you may want to use a semantic approach when naming your HTML elements – that is naming them after what they are instead of how they look.

    If you want to use SASS as your style writing language, don’t import bootstrap CSS file into you component Typescript or JavaScript source.

    Have each component come with and index.scss file, that @use bootstrap mixins, functions and variables to theme your component. And use a proper build toolchain capable of compiling those SASS files alongside the rest of the project.

    There are many of them available. I’m myself maintaining one of them so if you are interested by a more thorough answer about that point, please comment and I’ll update this answer.

    You’ll end up with more maintainable, readable and testable code, dramatically smaller stylesheets that only come with the rules that your app actually uses and way less bugs due to styling collisions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search