Centering Image with react / react-bootstrap / flexbox

Question

I am using versions:

[email protected]
[email protected]

I am getting confused a little bit about what is supposed to do what between react, react-bootstrap and flexbox. I have a simple image definition in a file called LoginImage.js :

import React, { Component } from 'react'
import { Image } from "react-bootstrap";

class LoginImage extends Component {
  render() {
    return (
      <Image width="150" src="/staff_login.jpg" />
    );
  }
}

export default LoginImage;

I am using it in the App.js file like so:

import LoginImage from './LoginImage'
...
    <Container>
      <Row>
        <Col xs={12} sm={4} md={4}>
          <LoginImage />
        </Col>
      </Row>
    </Container>

I know that CSS3 and Flexbox offer "justify-content" and "align-items" to position horizontally and vertically respectively, but it isn't clear where I am supposed to use them in the above code or if that is even the best way to center the image given what I have above.

I appreciate any help. Thanks.

Answer 1

You can use the built in features of react bootstrap and implement something like this:

<Row className="justify-content-md-center">
    <Col xs={12} sm={4} md={4}>
        <LoginImage />
    </Col>
</Row>`enter code here`

For reference to the docs, you can go here.

Answer 2

Another way to do if outside of flexbox is:

<Image width="125" className="rounded mx-auto d-block" src="/staff_login.jpg" />