How to align items on the left side in column when using react bootstrap?

Question

I am using React bootstrap and using Row and Col components of it. Column is aligning image horizontally centre by default. How to move this image to the left in the column?

Code

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from "react-bootstrap/Image";

function Header() {
  return (
    <Container fluid>
      <Row>
        <Col>
          <Image src="https://github.com/gautam-in/shopping-cart-assignment/blob/master/static/images/logo.png?raw=true" />
        </Col>
        <Col>Second</Col>
        <Col>Third</Col>
      </Row>
    </Container>
  );
}

export default Header;

Answer 1

Im not sure of how bootstrap's css tricks work BUT you can always use inline styling on the Col element as a hack lol.. Like so:

<Container fluid>
  <Row style>
    <Col style={{disply:'flex', justifyContent:'left'}}>
      <Image src="https://github.com/gautam-in/shopping-cart-assignment/blob/master/static/images/logo.png?raw=true"/>
    </Col>
    <Col>Second</Col>
    <Col>Third</Col>
  </Row>
</Container>

that should do it!