CODEWITHSUNDEEP
htmlcssreactjsreact-bootstrap
Angela
Angela

Reputation: 31

How to Arrange Items using React BootStrap

I'm trying to do this

But additional columns just go underneath the image. Here is what I'm trying

<Container>
                <Form >
                    
                <Col>
                    {hello}
                </Col>

                </Form>
            </Container>
            );

I thought that adding another Col would shift anything to the right but it just goes underneath the image. Without using padding or margin, is there any way to do this?

Upvotes: 0

Views: 904

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

By default, Bootstrap col have block for its display CSS property. This means it will automatically take up the entire width of its parent unless a width is defined. Take a look at its other properties as well:

.col {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
}

If you have multiple col in 1 row, it will basically eat up similar spaces due to flex-grow: 1. As a minimal fix to your layout, just wrap the content in a row and place all the "job" information on a separate col. Take note I have not wrapped the Image in a col because of the aforementioned properties. I suggest defining its width etc

<Container>
  <Form className="JobBox">
    <Row>
      <Image
        width={161}
        height={106}
        src={"https://via.placeholder.com/140x100"}
        rounded
      />
      <Col>
        <div>Some Text</div>
        <div>Another Text Text</div>
      </Col>
    </Row>
  </Form>
</Container>

CodeSandBox: https://codesandbox.io/s/adoring-mcnulty-0v2tb?file=/src/App.js

Upvotes: 0

shayanmalinda
shayanmalinda

Reputation: 2283

You Have to define a <Row> tag outside the <Col> tags

<Container>
    <Form className = "JobBox">
        <Row>
            <Col>
                <Image
                    width={161}
                    height={106}
                    src= {require("./office.jpg")}
                    rounded/>
            </Col>
            <Col>
                {location}
            </Col>
        </Row>
    </Form>
</Container>

Hope this will help you.

Upvotes: 1

Related Questions