CODEWITHSUNDEEP
reactjsbootstrap-4
user11766014
user11766014

Reputation:

why justify-content-center is not working in react?

I am learning reactjs now! I have created a class component called WritePostArea and inside this component I have used a bootstrap class called justify-content-center to center the element. I already installed bootstrap via command npm i [email protected] and I have also imported it in index.js but for some reasons it's not working. Other classes work fine except justify-content-center.

my component

import React from 'react';

class WritePostArea extends React.Component {
    render() {
        return (
          <div className="col-md-6 justify-content-center">
            <div className="card mt-5">
              <div className="card-body">
                <button>Share what's on mind!</button>
              </div>
            </div>
          </div>
        );
    }   
}

export default WritePostArea;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React from 'react';
import './App.css';
import WritePostArea from './components/writePostArea';

function App() {
  return (
    <div className="App container">
      <WritePostArea/>
    </div>
  );
}

export default App;

Upvotes: 0

Views: 1627

Answers (1)

Monzoor Tamal
Monzoor Tamal

Reputation: 810

You need to add row here here is the documentation BS 4

<div className="row justify-content-center">  
  <div className="col-md-6">
    <div className="card mt-5">
      <div className="card-body">
        <button>Share what's on mind!</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions