How to move text element in the footer?-CodePudding

I have added two columns within the container but would like the .company and .copyright text at the bottom left of the footer in the column. The Follow Us heading should be on the right with the .justify-text underneath it followed by social media elements. Thanks!

.footer {
  background-color: $pink;
  padding-top: 20px;
  text-align: left;
  color: $white;
}

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

<div >
  <div >
    <div >
      <div >
        <h5>Programme</h5>
        <p >This is text.</p>
        <p >© 2023 Blah Blah Blah</p>
      </div>
      <div >
        <h5>Follow Us</h5>
        <p >Join our socials and stay tuned.</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Try the following. The description wasn't clear to me, so let me know if you want anything changed.

.footer {
  background-color: $pink;
  padding-top: 20px;
  text-align: left;
  color: $white;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div >
  <div >
    <div >
      <div >
        <h5>Programme</h5>
        <p >This is text.</p>
        <p >© 2023 Blah Blah Blah</p>
      </div>
      <div >
        <h5>Follow Us</h5>
        <p >Join our socials and stay tuned.</p>
        <ul >
          <li>Icon 1</li>
          <li>Icon 2</li>
          <li>Icon 3</li>
          <li>Icon 4</li>
        </ul>
      </div>
    </div>
  </div>
</div>