Twitter Bootstrap Question posted in

How do I make row of div on top of parent div?-Twitter bootstrap

How do I place a row of div (which has 3 columns of image) on top of parent div (image) . I am using Bootstrap 5. Previously I used to do postition: absolute. The problem here is that the row overflow is being hidden. I have tried overflow: visible too. Below down is the code sample and the result i am getting.
Thank you for any kind of help.

.accomplishments{
  background: url("https://picsum.photos/1000/600");
  width: 100%;
  height: 40rem;
  background-size: cover;
  margin-top: 12rem;
  position: relative;
}

.project-tray{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y:visible ;  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container" >
    <h1 class="">Accomplishments</h1>
  </div>
  <div class="container-fluid  accomplishments mb-5 ">
    <div class="container" >
      <div class="row project-tray ">
        <div class="col " >
          <img src="https://picsum.photos/300/301" class="img-fluid " alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/302" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/303" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </div>
</main>

here are attached images of output:

The output i am getting

Expected output (figma)

Tags:

3

Answers


  1. 0

    I’m new to web-development but I think you should try to delete the top: 0%; property to see if it makes change.

    Login or Signup to reply.
  2. 0

    In general, it is better practice to "avoid" position absolute for such a simple layout (position absolute Breaks the normal flow + collapse height). By negative margin it is very easy to create this overlap (And keep the normal flow).

    Snippet (Same as your desire layout solve only by one line of custom CSS):

    .negative-margin{
  margin-top: -150px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container">
    <h1 class="">Accomplishments</h1>
  </div>
  <div class="container-fluid  accomplishments mb-5 ">
    <div class="container" >
      <div class="row project-tray ">
        <div class="col " >
          <img src="https://picsum.photos/201/300" class="img-fluid " alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/202/300" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/203/300" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </div>
  <div>
    <img class="img-fluid negative-margin" alt="Responsive image" src="https://picsum.photos/1920/1080">
  </div>
</main>
    Login or Signup to reply.
  3. 0

    Just a little changes in the bootstrap structure and shifted the class accomplishments from container-fluid class to col-12 class. Also added margin-top: 200px !important; that was missing in your stylesheet.css .accomplishments

    .accomplishments {
  background: url(https://picsum.photos/1000/600);
  width: 100%;
  height: 36rem !important;
  margin-top: 200px !important;
  background-size: cover;
  position: relative;
}

.project-tray {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: visible;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<main>
  <div class="container heading">
    <h1 class="text-center pt-5">Accomplishments</h1>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 accomplishments">
        <div class="row project-tray ">
          <div class="col ">
            <img src="https://picsum.photos/300/301" class="img-fluid " alt="">
          </div>
          <div class="col">
            <img src="https://picsum.photos/300/302" class="img-fluid" alt="">
          </div>
          <div class="col">
            <img src="https://picsum.photos/300/303" class="img-fluid" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search