row justify-content-between is not working in two divs-CodePudding

I have two divs, I want one to the left and the other to the right (like this). I've tried self-align-start and self-align-end in each column, but it didn't result in what I want. I also put the class row-cols-1 (not in the screenshot).

What am I missing? Here's my code:

.about-me {
  max-width: 300px;
}

.current-work {
  max-width: 300px;
}

<body>
  <section id="about" class="container-fluid">
    <div class="row row-cols-1 justify-content-between">
      <div class="about-me col-6">
        <h2> About Me </h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <p>
      </div>

      <div class="current-work col-6">
        <h2> What I'm Doing </h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <p>
      </div>
  </section>
</body>

And here's the result

CodePudding user response：

You can try offset-3 in the second div class attribute.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-9">
                <div class="item">
                    <h1>ABOUT ME</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?t amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
                </div>
            </div>
            <div class="col-9 offset-3 text-end">
                <div class="item">
                    <h1>ABOUT ME</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

CodePudding user response：

You can use .me-auto & .text-start for left aligned, and use .ms-auto & .text-end for right aligned.

:root {
  --heavy-red-border: 1em solid red;
}

.red-border-start {
  border-left: var(--heavy-red-border);
}

.red-border-end {
  border-right: var(--heavy-red-border);
}

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-9 me-auto text-start red-border-start">
        <div class="item">
          <h1>ABOUT ME</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.</p>
        </div>
      </div>
      <div class="col-9 ms-auto text-end red-border-end">
        <div class="item">
          <h1>ABOUT ME</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.
            Soluta magni quo incidunt ducimus tempora nisi?</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>