0

Code

import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
const Downloads = () => {
  return (
    <div class="text-bg-secondary text-white p-2">
        <div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
    </div>
  );
};
  
export default Downloads;

In the Code above, it works as long as i don't add style= , the same happens everytime i add it anywhere. for example

<div>

works but

<div style="">

does not.

I tried reinstalling bootstrap. Expected: Should Show page with its contents.

Sahib
  • 13
  • 2
  • I dont understand the issue. Why would you ever specify style in that way? meaning whats the purpose and or use case where you have `style=""`? Also when you say its a blank page.. what is the exception logged in the developer console? what is the error message? – John Ruddell Jan 06 '23 at 07:57
  • Use your browser's devtools inspect facility to see what HTML is being createdin the two cases. Are you overwriting the style attribute set by react-bootstrap? – A Haworth Jan 06 '23 at 08:02
  • There should be multiple warnings in your dev-tools console. You should attend to those first – Phil Jan 06 '23 at 08:07

1 Answers1

0

Try writing your style like this :

style={{color: "red", border: "2px solid red"}} // for example

And your class= must be className=

With React, you can't write attribute as in HTML

Johan
  • 2,088
  • 2
  • 9
  • 37
  • thanks, but i don't understand why class should be className, it when it works fine with class. – Sahib Jan 06 '23 at 10:32
  • Here is a topic explaining it https://stackoverflow.com/a/46991278/17978333. More generaly, React uses its own custom DOM. By using class, you hit the real DOM directly, which is not a good practice in React. Here is the doc for more infos https://reactjs.org/docs/faq-internals.html – Johan Jan 06 '23 at 10:35