Bootstrap 4 Center list in col and left align text in list

Question

I have the following demo code for making a list of links:

<div class="container-fluid">
  <div class="row justify-content-center">
     <div class="col-auto col-md-3">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

You can see the result in this codeply

When the screen is small the columns are all centered in the space. However, when the screen size is larger I want more space between the columns. So I'm using Bootstrap utility classes setting the columns to col-md-2.

The problem is that I want the text to be aligned left in the list (which it is) and the list itself centered in each column so that the contents of the entire row look centered on the page.

Currently, each list is left aligned in each column.

Contrary to the comment that this question has already been asked, it has not in this particular context. I am asking about centering vertical list, not a horizontally aligned list.

I am not asking how to horizontally align the lists only but how to center the content AND and center the content in the lists while keeping the text left aligned in each list.

score 2 · Accepted Answer · edited Nov 10 '19 at 16:45

I found a way to do it using Bootstrap 4 flex utility classes as follows:

<div class="container-fluid">
  <div class="row justify-content-center">
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3 d-flex justify-content-center">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

Here is the codeply

score 1 · Answer 2 · answered Apr 03 '19 at 04:17

try using d-flex bootstrap(4.3.1) class to make ur requirements: https://getbootstrap.com/docs/4.0/utilities/flex/

  <div class="container-fluid">
  <div class="row d-flex justify-content-start">
     <div class="col-auto col-md-3">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

if this is not ur requirement let me know!!

This will align the contents on the left. I want the content of the columns centred in each column while keeping the text lined up on the left of each unordered list. — chell, Apr 03 '19 at 04:54

Xenio Gracias · Answer 3 · 2019-04-03T05:40:45.607

1

added

ul{
  margin-left: 50%;
    transform: translateX(-50%);
}

. Is this how you want it??. check below link https://codepen.io/Xenio/pen/yrYVMM

ul{
  margin-left: 50%;
    transform: translateX(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
      <div class="row justify-content-center">
         <div class="col-auto col-md-4">
             <ul class="list-unstyled">
                 <li>First List Item</li>
                 <li>Second list item</li>
             </ul>
        </div>   
        <div class="col-auto col-md-4">
              <ul class="list-unstyled">
                 <li>First List Item</li>
                 <li>Second list item</li>
              </ul>
        </div>
         <div class="col-auto col-md-4">
             <img src="http://placekitten.com/g/200/300" >
        </div>   
       </div>
     </div>

edited Apr 03 '19 at 05:40

answered Apr 03 '19 at 04:50

Xenio Gracias

2,728
1
9
16

I want the content centred in the page but with the text left aligned in each column – chell Apr 03 '19 at 04:53
text is aligned to left only. can you show me a screenshot – Xenio Gracias Apr 03 '19 at 04:58
just added a screen shot. You can see that the content is skewed to the left because the text is left aligned and so are the unordered lists in each col. I need the UL centered in each col. – chell Apr 03 '19 at 05:24
Yes that is what i wanted thank you. I'm curious though, there is no build in utility class in Bootstrap to center content in a column? – chell Apr 03 '19 at 06:08
try text-center – JonSnow Apr 03 '19 at 07:56
text-center centers the text but I want the text left aligned inside of a ul. The ul I need to be centered inside the column. – chell Apr 03 '19 at 08:07

Bootstrap 4 Center list in col and left align text in list

3 Answers3