htmlcssbootstrap-5grid-layout

How can I make three columns of divs, with the center column offset, collapse into two columns, with the second offset, when the window is shrunk?

I have a grid of divs for my website's about page with three columns, and the center column moved down by 50%.

Basically what I want to happen is that the third column is removed when the window is too small, and all the images in it are moved into the first and second columns, and for the second column to still be offset 50%.

My layout looks like this: the second column of pictures is offset. White lines represent text; person's name and job description

The second column of pictures is offset. White lines represent text on the image, of the person's name and job description.

When the window is minimized past a certain threshold, I want it to look like this: two columns, with the second one being offset 50%, but the same amount of images

Currently, what happens when the window is minimized past that threshold, the layout just breaks, with crazy overlapping images and misaligned stuff.

I am using bootstrap 5.3.3

Here is my code:

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>

.widthSettingImage{
    width: 30%;
    height: fit-content;
    min-width: 180px;
}
 
.bottom-left {
    position: absolute;
    bottom: 16px;
    left: 16px;
}
.bottom-left.fs-6{
    position: absolute;
    bottom: 0px;
    left: 16px;
}
</script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</head>

<body>
        <div class="widthSettingImage float-start position-relative text-light m-2" style="box-shadow: 0px 0px 5px 0px;">
            <img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
                class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
            <div class="bottom-left fs-5 fw-semibold">Example Name</div>
            <div class="bottom-left fs-6">Software Engineer</div>
        </div>
        <div class="widthSettingImage float-start position-relative text-light m-2" style=" transform:translateY(50%); box-shadow: 0px 0px 5px 0px;">
            <img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
                class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
            <div class="bottom-left fs-5 fw-semibold">Example Name</div>
            <div class="bottom-left fs-6">Software Engineer</div>
        </div>
        <div class="widthSettingImage float-end position-relative text-light m-2" style="box-shadow: 0px 0px 5px 0px;">
            <img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
                class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
            <div class="bottom-left fs-5 fw-semibold">Example Name</div>
            <div class="bottom-left fs-6">Software Engineer</div>
</div>
<div class="widthSettingImage float-start position-relative text-light m-2" style="box-shadow: 0px 0px 5px 0px;">
            <img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
                class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
            <div class="bottom-left fs-5 fw-semibold">Example Name</div>
            <div class="bottom-left fs-6">Software Engineer</div>
        </div>
        <div class="widthSettingImage float-start position-relative text-light m-2" style=" transform:translateY(50%); box-shadow: 0px 0px 5px 0px;">
            <img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
                class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
            <div class="bottom-left fs-5 fw-semibold">Example Name</div>
            <div class="bottom-left fs-6">Software Engineer</div>
        </div>
        <div class="widthSettingImage float-end position-relative text-light m-2" style="box-shadow: 0px 0px 5px 0px;">
            <img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
                class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
            <div class="bottom-left fs-5 fw-semibold">Example Name</div>
            <div class="bottom-left fs-6">Software Engineer</div>
</div>
</html>

I genuinely have no idea how to do this.

Solution

  • Not really doable with Bootstrap itself. It would be far easier to solve it with your custom CSS by using CSS Grid.

    Simply create a 2-columns grid and write media queries to change it to a 3-column grid at a specific width.

    After that, you can offset the 2nd column with a positive margin-top and a negative margin-bottom. Note that you need to write the offset within media queries as they don't overwrite each other but would apply both otherwise.

    .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  img{
    width: 100%;
  }
}

@media only screen and (width <= 500px) {
  img {
    &:nth-child(even) {
      margin-top: 50%;
      margin-bottom: -50%;
    }
  }
}

@media only screen and (width > 500px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    img {
    &:nth-child(3n + 2) {
      margin-top: 50%;
      margin-bottom: -50%;
    }
  }
}
    <div class="grid">
  <img src="https://placehold.co/400x600">
  <img src="https://placehold.co/400x600">
  <img src="https://placehold.co/400x600">
  <img src="https://placehold.co/400x600">
  <img src="https://placehold.co/400x600">
  <img src="https://placehold.co/400x600">
</div>