如何调整页脚（footer）内.company、.copyright等文本元素的布局位置？

Got it! To get your .company and .copyright text positioned at the bottom of the left column, we can use Bootstrap 5's built-in flex utility classes to restructure the column layout. Here's the adjusted code with clear explanations:

Modified HTML #

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

<div class="footer">
  <div class="container">
    <div class="row justify-content-between">
      <!-- Left column: flex layout to push content to bottom -->
      <div class="col-sm-7 d-flex flex-column justify-content-between h-100">
        <h5>Programme</h5>
        <div class="footer-bottom">
          <p class="company">This is text.</p>
          <p class="copyright">© 2023 Blah Blah Blah</p>
        </div>
      </div>
      <!-- Right column: follow section with social links -->
      <div class="col-sm-4">
        <h5>Follow Us</h5>
        <p class="justify-text">Join our socials and stay tuned.</p>
        <!-- Add your social media elements here -->
        <div class="social-links mt-3">
          <a href="#" class="me-2">Facebook</a>
          <a href="#" class="me-2">Twitter</a>
          <a href="#">Instagram</a>
        </div>
      </div>
    </div>
  </div>
</div>

Optional CSS Tweaks (for better spacing) #

.footer {
  background-color: $pink;
  padding-top: 20px;
  padding-bottom: 20px; /* Prevent content from touching the footer's bottom edge */
  text-align: left;
  color: $white;
}

.footer-bottom {
  margin-top: auto; /* Extra safeguard to keep this group anchored at the bottom */
}

What's Changed & Why? #

• Left Column Flex Setup: Added d-flex flex-column justify-content-between h-100 to turn the column into a vertical flex container that fills the full row height. This pushes the h5 to the top and the .footer-bottom div straight to the bottom.
• Bottom Content Grouping: Wrapped .company and .copyright in a div to keep them grouped together at the bottom, with margin-top: auto ensuring they stay put even if the top content's height changes.
• Right Column Social Section: Added a .social-links block with Bootstrap's mt-3 class to add clean spacing above your social media elements.
• Footer Padding: Added bottom padding to the footer to avoid content getting cramped against the edge.

内容的提问来源于stack exchange，提问作者J4sum