How to make text bold in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to make text bold in react js with code example.

Use inline styles to bold specific text in React.js, e.g. <span style={{fontWeight: 'bold'}}>aGuideHub</span>. The bold font will only be applied to the element to which it was added and its children.

Let’s look at the following example to understand how it basically works:

APP.js

const App = () => {
    return (
      <div>
        <p style={{fontSize: '2rem'}}>
        Welcome To<span style={{fontWeight: 'bold'}}> aGuideHub</span>
          !!!
        </p>
      </div>
    );
  };
  
  export default App;

We used inline styles to bold some text in an element.

The first set of curly braces in the inline style marks the beginning of an expression, and the second set of curly braces is the object containing styles and values.

The bold font is only going to be applied to the span element.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

All the best 👍