How Do You Center a Div While Maintaining the Bootstrap Size Distribution?

user_16498560 0
Viewed 36

P.S I'm self taught so I'm sorry about the lack of proper terms and info.

I'm using bootstrap containers and stuff and I know that they adjust the dimensions of whatever is in them based on how many columns there are (I'm using col-md-4 for the columns and it fits 3 photos per column)

I used that on 6 images and I have a 7th one to use. I centered it using flex but while it centers, the dimensions are not the same since it's the only image in that row and not automatically readjusted to be the same as the others. And when I remove the centering it looks perfect dimensions wise since its under the same group of photos but its aligned on the left of the screen since it's the first photo in the new row which makes sense.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
      <div class="row">
        <div class="col-md-4">
          <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
        </div>
        
        <div class="d-md-flex justify-content-center">
        <div class="col-md-4">
          <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
        </div>
      </div>
    </div>

This is an example of what I'm trying to create and you can see how when i justify center it, it looks bigger than the rest and doesn't follow the same dimensions as the previous one had them distributed among the three of the photos

It's my first time posting here so please let me know if i need to add something to the code next time to make it easier to read

css html
2 Answers

i shared a working Example i hope is that what u want and if not please provide a example/screenshot of what u desire and please view in full screen while run code snippet

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
    <title>Document</title>

    <style>

    </style>
</head>

<body>
    <div class="container">
        <div class="row p-2" style="row-gap: 10px;">
            <div class="col-md-4">
                <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
            </div>
            <div class="col-md-4">
                <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
            </div>
            <div class="col-md-4">
                <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
            </div>

            <div class="col-md-4">

                <img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">

            </div>
        </div>
    </div>
</body>

</html>

user_151656770

The problem I had trouble with seems to be from the version of bootstrap I'm using (5.0.2) . I noticed with the answers I was given that the code was similar to mine and when I tried to use the version posted by the very helpful people, it fixed my code! I will have to research which version of bootstrap to use from now because I had no prior sources to this and just used the latest one.

Take a look at the edited code in my post for the working version!

This has been my very first question, thank you all for your great help!

user_164985600
Related