Styling with Bootstrap Classes in React

So far our components have been pretty plain- let’s change that up by adding a CSS class.

In HTML we would include a ‘class’ attribute- however, ‘class’ is a reserved term in JavaScript, so using ‘class’ in JSX won’t work. Fortunately JSX will compile ‘className’ into ‘class’, so we’ll use ‘className’ to add some styling.

const Component = props => {
  return (
    <h1 className={'cssClass'}>Hello world!</h1>
  );
}

This will render HTML elements with the defined CSS class and the browser will apply the matching class styles defined in your CSS files.

Let’s walk through a quick CodePen example and add some Bootstrap styling to a quote list.

If you don’t know you to set up CodePen for React, check out this story.

In addition to setting up CodePen for React, let’s add Bootstrap as well. You do this by selecting the gear icon for your pen, selecting CSS, and selecting Bootstrap from the quick add menu.

https://giphy.com/gifs/hZzqpeLKwLSM0 for HD

Now let’s add our quote data and components to the JavaScript file.

const quotes = [
  {text: 'Whatever the mind of man can conceive and believe, it can achieve.',
  author: 'Napoleon Hill'},
  {text: 'Strive not to be a success, but rather to be of value.',
  author: 'Albert Einstein'},
  {text: 'I attribute my success to this: I never gave or took any excuse.',
  author: 'Florence Nightingale'},
  {text: 'You miss 100% of the shots you don’t take.',
  author: 'Wayne Gretzky'}
];
const Heading = () => {
  return (
    <div>
      <h1>Famous Quotes</h1>
    </div>
  );
};
const Quote = props => {
  return (
    <div>
      <div>
        <h4>{props.quote.text}</h4>
        <h6>{props.quote.author}</h6>
      </div>
    </div>
  );
};
const App = props => {
  const quotes = props.quotes.map((quote) => {
    return (
      <Quote quote={quote} />
    )
  });
  return (
    <div>
      <Heading />
      <div>
        {quotes}
      </div>
    </div>
  );
};

And then finish off with a render:

ReactDOM.render(
  <App quotes={quotes} />,
  document.getElementById('root')
);

Your CodePen should look like this:

It’s pretty plain right now- so let’s pick out some styling. I’m going to use the Card and Jumbotron classes from Bootstrap. You can see their styling here:

Card

Jumbotron

Let’s add the classes using ‘className’.

const Heading = () => {
  return (
    <div className="jumbotron">
      <h1 className="display-3">Famous Quotes</h1>
    </div>
  );
};
const Quote = props => {
  return (
    <div className="card">
      <div className="card-block">
        <h4 className="card-title">{props.quote.text}</h4>
        <h6 className="card-subtitle mb-2 text-muted">{props.quote.author}</h6>
      </div>
    </div>
  );
};
const App = props => {
  const quotes = props.quotes.map((quote) => {
    return (
      <Quote quote={quote} />
    )
  });
  return (
    <div>
      <Heading />
      <div>
        {quotes}
      </div>
    </div>
  );
};

Viola! And just like that- our components don’t look so plain.

Here’s the CodePen:

https://codepen.io/trey-davis/pen/EwYmEJ

So far we’ve been dealing with data that is immutable via props. Next we’ll learn about state and manipulating data in React.