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.

React , Text, Bold

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts