How to fix this div to the right top

September 5, 2023

I would like to fix a div to the top-right of the screen : (see the blue div on this image)

I am using bootstrap 5.3 and the code is :

<body class="d-flex flex-column h-100">
<x-horizontal-menu />
<main class="flex-shrink-0 pb-3">
    <div class="container">
        
        <h1 class="text-center text-primary">Noter un travail</h1>
        <div class="row">
            <div class="col-md-8">
            </div>
            
            {{-- how to fix this div to the top right ? --}}
            <div class="col-md-4">
            </div>
        </div>
    </div>
</main>

There is also a navbar (it is the component).

I have tried to add some classes and combination of classe "sticky-top" or "fixed-top". Without success. How can I do that ?

>Solution :

You are on the right track with sticky-top.

What’s happening is that both column have the height of the taller one, because the parent, .row, is of type: display: flex;.

The right div is sticky, but as it has the same height, it doesn’t behave the way you want.
What you need to do is to ensure that the right div is the height of it’s own content, you can achieve that in a flex container by adding: align-self-start.

You’ll get: <div class="col-md-4 sticky-top align-self-start">

See snippet:

p {
 min-height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<body class="d-flex flex-column h-100">
  <main class="flex-shrink-0 pb-3">
    <div class="container">

      <h1 class="text-center text-primary">Noter un travail</h1>
      <div class="row">
        <div class="col-md-8">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
        </div>

        <div class="col-md-4 sticky-top align-self-start">
          {{-- how to fix this div to the top right ? --}}
        </div>
      </div>
    </div>
  </main>