Bootstrap layout not splitting cards properly-CodePudding

Currently I have a bootstrap container where I have card views inside the row tag. I want each row to have 3 cards equally distanced and in the center. To achieve this I have used <div class="col-lg-4 col-md-4 col-sm-6"> But for some reason it places 1 card in each row instead of 3.

CodeSandbox: https://codesandbox.io/s/musing-haze-j9vvn?file=/src/App.tsx

Code:

<div className="container">
        <div className="row">
          <div className="col-lg-4 col-md-4 col-sm-6">
            {posts &&
              posts.map((test) => (
                <div style={{ padding: "40px" }}>
                  <div className="citizen-item" key={test.id}>
                    <div className="card">
                      <img
                        style={{
                          height: "100%",
                          width: "100%",
                          minHeight: "180px",
                          objectFit: "cover"
                        }}
                        src={test.backgroundImage}
                      />
                      <div>
                        {test.Title}
                      </div>
                      <div>
                        Access to 151
                      </div>
                      <div>
                        <button className="findButton">FIND OUT MORE</button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}

            {/* Find Out more Card */}
            <div style={{ padding: "40px" }}>
              <div
                className="citizen-item"
                style={{ height: "100%", minHeight: "348.8px" }}
              >
                <div>
                  <div>
                    CARIBBEAN CITIZENSHIP
                  </div>
                  <div>
                    <button className="findButton">APPLY NOW</button>
                  </div>
                  <div>
                    COMPARE PROGRAMS
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

CodePudding user response：

Looks like you've restricted the container to be col-md-4, col-lg-4. This forces the cards to go onto the next line since the container is only 4 columns wide. The container should span to 12 columns for it to able to accommodate multiple cards in a row.

So I added below to your cards

col-md-4 col-lg-4 col-sm-12
display: inline-block

I added below code for your container to make it span to 12 columns

col-md-12 col-lg-12 col-sm-12

Kindly refer the link below that's working fine after above changes

https://codesandbox.io/s/practical-satoshi-46gt8?file=/src/App.tsx