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;
}

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.

user_1264804 · Answer

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;
}




  
    
      
        
        Item 1 with a Longer Title
    
    
      
        
        Item 2
    
    
      
        
        Item 3
    
    
      
        
        Item 4
    
    
      
        
        Item 5

user_4453058 · Answer

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;
}


  
        Item one
        Item two loreum

Center list items while aligning to left edge with Bootstrap

2 Answers