Html CSS footer alignment-CodePudding

I have developed a site on angular. All things are working fine. Now I want to adjust the footer.

Actual Footer

Expected Footer

Code

<footer>
  <div class="row">
    <div class="col-12">
      <img src="../../assets/img/logo.svg" alt="" class="img-fluid" />
    </div>
    <div class="col-md-3 col-12">
      <p>
        <b>Manufactured by:</b>
      </p>
    </div>
    <div class="col-md-2 col-6 mt-lg-0 mt-3">
      <ul class="nav-menu">
        <li>
          <a [routerLink]="['/']">Home</a>
        </li>
        <li>
          <a href="#aboutUs">About us</a>
        </li>
        <li>
          <a href="#faqs">Faqs</a>
        </li>
        <li>
          <a [routerLink]="['/latest-recipes']">recipes</a>
        </li>
        <li>
          <a [routerLink]="['/stores']">Stores</a>
        </li>
        <!-- <li>
                      <a  [routerLink]="['/where-to-buy']">where to buy</a>
                  </li> -->
      </ul>
    </div>
    <div class="col-md-2 col-6 mt-lg-0 mt-3">
      <ul class="px-0">
        <li><a href="">Privacy & Policy</a></li>
        <li><a href="">Terms & Condition</a></li>
      </ul>
    </div>
    <div class="col-md-3 col-12">
      <h1>Karachi Office</h1>
      <p></p>
      <h1>Lahore Office</h1>
      <p></p>
      <div class="social-icon d-flex align-items-center">
        <a href=""><i class="fab fa-facebook-f"></i></a>
        <a href=""><i class="fab fa-twitter"></i></a>
        <a href=""><i class="fab fa-instagram"></i></a>
      </div>
    </div>
    <div class="col-md-2 col-12">
      <img src="../../assets/img/ebs.png" class="img-fluif" />
    </div>
  </div>
</footer>

How can I align the footer? Any help would be highly appreciated.

CodePudding user response：

You've made the image col-12 which will make the image spread across the full container. Remember that in bootstrap each container is split into 12, so saying that the image covers col-12 will cover all of them. From the looks of it you want to try around col-2.

Alternatively you could achieve the same without Bootstrap. Put the logo/manufactured by links in one div and float them left. Place the rest of the content in another div and float them right.

CodePudding user response：

Add and Remover mt-3(margin-top) from the div.