Question 369762 in Html Question posted in
Some basic documentation can be found here.

Html – How do I place the images together on the right side of this Bootstrap Footer Style

How do I do I make the "linkedin" images touch eachother or have a less gap? I am using the second bootstrap footer template here https://getbootstrap.com/docs/5.3/examples/footers/ . I replaced the images on the right side with linkedin images, but cant seem to get the padding/margin right.

HTML:

<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <div class="col-md-4 d-flex align-items-center">
          <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
            <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
          </a>
          <span class="mb-3 mb-md-0 text-body-secondary">© 2024</span>
        </div>
    
        <ul class="nav col-md-3 justify-content-end list-unstyled d-flex">
          <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"></svg><img src="./assets/linedkin.png" class="bi" width="24" height="24" /></a></li>
          <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"></svg><img src="./assets/linedkin.png" class="bi" width="24" height="24" /></a></li>
          <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"></svg><img src="./assets/linedkin.png" class="bi" width="24" height="24" /></a></li>
        </ul>
      </footer>

I tried on CSS

.ms-3 {
    padding-left: 0.25rem; /* Adjust the left padding */
    padding-right: 0.25rem; /* Adjust the right padding */
}
Tags:

2

Answers


  1. 0 
    since you used bootstrapt in your code and given ms-3 it has margin that's the first reason.
the second reason is that you have given padding-left which also opens the space.
The third reason is that between each image you have an svg element with a height and width of 24px.
That is why such a problem arises. Take a look at the code I wrote.

    
.nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }
  .ms-3 {
    margin: 0;
    padding: 0;
  }
</style>
  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
    <div class="col-md-4 d-flex align-items-center">
      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
        <svg class="bi" width="30" height="24">
          <use xlink:href="#bootstrap"></use>
        </svg>
      </a>
      <span class="mb-3 mb-md-0 text-body-secondary">© 2024</span>
    </div>
    <ul class="nav col-md-3 justify-content-end list-unstyled">
      <li class="ms-3"><a class="text-body-secondary" href="#">
          <!-- <svg class="bi" width="24" height="24"></svg> -->
          <img src="./linkedin.svg" class="bi" width="24" height="24" /></a>
      </li>
      <li class="ms-3"><a class="text-body-secondary" href="#">
          <!-- <svg class="bi" width="24" height="24"></svg>-->
          <img src="./linkedin.svg" class="bi" width="24" height="24"/></a> </li>
      <li class="ms-3"><a class="text-body-secondary" href="#">
          <!-- <svg class="bi" width="24" height="24"></svg> -->
          <img src="./linkedin.svg" class="bi" width="24" height="24" /></a>
      </li>
    </ul>
  </footer>
    Login or Signup to reply.
  2. 0

    Remove class="ms-3" from <li> and then add padding through inline styling. Also, you need to remove the svg as it is empty and just occupying the space. Run the snippet to see it in action.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <div class="col-md-4 align-items-center">
          <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
            <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
          </a>
          <span class="mb-3 mb-md-0 text-body-secondary">© 2024</span>
        </div>
    
        <ul class="nav col-md-3 justify-content-end list-unstyled d-flex">
          <li  style="padding-left: 0.25rem; padding-right: 0.25rem;"><a class="text-body-secondary" href="#"><img src="https://cdn-icons-png.flaticon.com/512/3536/3536505.png" class="bi" width="24" height="24" /></a></li>
          <li style="padding-left: 0.25rem; padding-right: 0.25rem;"><a class="text-body-secondary" href="#"><img src="https://cdn-icons-png.flaticon.com/512/3536/3536505.png" class="bi" width="24" height="24" /></a></li>
          <li style="padding-left: 0.25rem; padding-right: 0.25rem;"><a class="text-body-secondary" href="#"><img src="https://cdn-icons-png.flaticon.com/512/3536/3536505.png" class="bi" width="24" height="24" /></a></li>
        </ul>
      </footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search