React-Boostrap center text

Question

I just stumbled upon React-Bootstrap. I looked at their docs, but I couldn't find anything about centering text. Like this:

<h1 class="text-center">Hello World</h1>

So I was wondering if you can use the same technic, but apply it for React development instead. Like this for example:

<h1 classnName="text-center">Hello World</h1>

Cheers!

Answer 1

React-Bootstrap does not inherit the Bootstrap styles. This means that you must import the css in order to use the classes that are in the standard Bootstrap library.

Read this on the official documentation:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide. Also see http://getbootstrap.com/customize/ for details about customizing stylesheets to match your component use.

---

So once you've imported the styles, you should be able to do:

<h1 className="text-center">Hello World</h1>

Though, you'd have to spell className correctly too.

const MyApp = () => <h1 className="text-center">Hello World!</h1>;

ReactDOM.render(<MyApp />, document.getElementById("app"))

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

---

Alternatively, you can always define custom inline-styles if you'd prefer, like this:

<h1 style={{textAlign: "center"}}>Hello World</h1>

Answer 2

I think that this bootstrap class will works

 <h1 className="m-auto"> text </h1>