Center list items while aligning to left edge with Bootstrap

Question

I'm utilising the following Bootstrap modal on a site (simplified example with fewer list items):

#manufacturer-modal .modal-body {
  padding: 0;
}

#manufacturer-modal .nav-item {
  list-style: none;
}

#manufacturer-modal .nav-link {
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 3.5em;
  border-bottom: 1px solid #dee2e6;
  padding: 0;
}

#manufacturer-modal .nav-link img {
  width: 80%;
  max-width: 2.6em;
  margin: 0 1.5em;
  display: block;
}

.show {
  display: block !important;
}

<div class="modal-body">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 1</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 2</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 3</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 4</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 5</span></a>
  </li>
</div>

By default it is left-aligned which, although tidy, would look better centered:

However, when I center it with justify-content:center, it loses its tidy alignment along the left-edge:

How can I get the best of both worlds by keeping the items aligned to the same left edge while also centering them in the middle of the modal? It occurs to me that what I want probably involves some form of margins and/or padding, but no amount of messing around with them in dev tools gets this working, so I'm obviously missing something and I'm now at a loss.

isherwood · Answer 1 · 2021-12-14T16:44:40.703

I'd do a few things. First, put your list items in a list element. This is required for valid HTML.

Then, use a flush list group instead of a nav menu. It has initial styling much closer to what you want.

Finally, make the container a flexbox element with Bootstrap classes and justify its content center. This could be the modal body or an interior element. You'll have to fiddle with horizontal padding on the nav-link elements to get the list item borders to go full-width for each modal size you're using.

Notice that I have not written any CSS. I've also removed much of your custom CSS and replaced it with Bootstrap classes. I strongly suggest getting very familiar with Bootstrap's components and flex utilities. You don't want to be writing custom CSS for things that it does out of the box. That makes more work for you now and later.

/* #manufacturer-modal */ .list-group-item {
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -1px;
}

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

<div class="modal-body d-flex justify-content-center">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 1 with a Longer Title</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 2</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 3</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 4</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 5</span></a>
    </li>
  </ul>
</div>

This looked promising, and I agree that a Bootstrap-only solution would be preferable to clogging up my CSS, but unfortunately it doesn't seem to work - instead my SVGs just get increased to their maximum size, and putting the sizing styling back from `.nav-link img` results in this: https://i.imgur.com/PHTMgp1.jpg. This may be related to your edit to the question that removed crucial utility classes that both trigger and align the modal, which I obviously can't afford to get rid of. — Hashim Aziz, Dec 14 '21 at 19:26
The modal stuff was removed because if the Bootstrap library is included the modal wrapper is hidden. None of that affects the contents, though. — isherwood, Dec 14 '21 at 19:31
What do you mean by "you'll have to fiddle with horizontal padding on the nav-link elements to get the list item borders to go full-width for each modal size you're using". It's a pretty crucial part of the solution, are you saying there's no way to do it responsively as it is in my question? — Hashim Aziz, Dec 15 '21 at 16:38
Media queries are responsive. It's difficult to provide specifics without seeing a full demo. Is your modal flexible at all screen sizes, or does it have fixed widths? — isherwood, Dec 15 '21 at 16:39
Apologies, I meant fluidly. I'm currently using one size of modal for all sizes except mobile, when it becomes full-screen thanks to the `modal-fullscreen-md-down` utility class. I'm fine with making media query adjustments for lower than medium size but larger than `md` I'd like everything to be fluid, which is how the example in my question behaved. — Hashim Aziz, Dec 15 '21 at 16:47
I don't have a solution for that with CSS. You have two conflicting requirements (left aligned _and_ centered in a wide container). This might be the best I can offer short of a custom CSS grid thing. That seems like overkill. — isherwood, Dec 15 '21 at 16:50

score 0 · Answer 2 · answered Dec 14 '21 at 15:47

0

Keep two parent div flex elements for your nav items with "justify content center", these code align you items as center of the div with left align.

.first-parent {
  display: flex;
  justify-content: center;
}

.second-parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div class="first-parent">
  <div class="second-parent">
        <div>Item one</div>
        <div>Item two loreum</div>
  </div>
</div>

answered Dec 14 '21 at 15:47

Tamilvanan

708
1
7
21

Nope, this doesn't work either, possibly because you failed to take into account that I'm not working with `div`s but inline elements like `a`, `img` and `span`. – Hashim Aziz Dec 14 '21 at 20:38
@isherwood Yes I agree we can achieve most of the styles using Bootstrap, – Tamilvanan Dec 15 '21 at 04:05
@HashimAziz To achieve centered div with left aligned elements, simply you've to use flex container with justify content center for the parent div. It can be custom css or bootstrap classes. There's no dependency with inline elements whether it's div or span! – Tamilvanan Dec 15 '21 at 04:08

Center list items while aligning to left edge with Bootstrap

2 Answers2