How to Center a List with Bootstrap 4

How can I center a list with Bootstrap 4?

Use text-center OR,

Use mx-auto inside a flexbox container (d-flex)..

https://www.bootply.com/6COUMfNrEU

<div class="d-flex">
  <ul class="list-inline mx-auto justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

How to centering works in Bootstrap 4...

text-center is used for display:inline elements

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various centering methods...

Center text or inline elements: text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

Center display:block or display:flex: mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

Columns can also be centered with: mx-auto, because row is display:flex

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

Demo Bootstrap 4 Horizontal Centering

Centering a list in Bootstrap CSS

So I figure that your issue here is that your ul is not centered in container > row > text-left

  1. Add display: inline-block to .container > .row > .text-left > ul to let it take as much width as its contents

  2. Add text-align: center to .container > .row > .text-left to center the ul inside.

  3. Add text-align: left to the ul to justify the list to left.

See demo below:

.container > .row > .text-left {

  text-align: center;

}

.container > .row > .text-left > ul {

  text-align: left;

  display: inline-block;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="well text-center maindiv">

  <h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>

  <h3 class="text-center">The band that brought joy to the hearts of millions</h3>

  <div id="div1" class="well text-center">

    <div id="div2">

      The Mighty Diamonds were a band from Jamaica</div>

  </div>

  <h3 class="text-center;">A Brief Biog</h3>

  <p class="text-left body-para">[Paragraph text]</p>

  <h3>Studio albums</h3>

  <div class="container">

    <div class="row">

      <div class="col-xs-4"></div>

      <div class="col-xs-4 text-left">

        <ul>

          <li><span>1964</span> - Album 1</li>

          <li><span>1966</span> - Album 2</li>

          <li><span>1967</span> - Authentic Album Vol. 2</li>

          <li><span>1996</span> - Greetings from Album 4</li>

          <li><span>1998</span> - Ball of Fire</li>

          <li><span>2009</span> - From Paris with Love</li>

          <li><span>2007</span> - On the Right Track</li>

          <li><span>2012</span> - Walk With Me Album</li>

          <li><span>2016</span> - Platinum Ska</li>

        </ul>

      </div>

      <div class="col-xs-4"></div>

    </div>

  </div>

</div>

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

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

How to align bootstrap 4, horizontal list group in center

For posterity:
Apply d-flex justify-content-center if your element is not a flex element.

Original Answer:
Apply justify-content-center to the list-group

Codepen: https://codepen.io/anon/pen/gZRzOR

Here it is in the documentation: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

<div class="list-group list-group-horizontal justify-content-center">
....
....
</div>

Center aligning an unordered list with bullets in Bootstrap

Change your code into this

HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul>
  <li>This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

CSS:

ul {
  display: table;
  margin: 0 auto;
}

Display table will care about the box size based on inside value and margin auto will centralized the section.

Bootstrap 4, How do I center-align a button?

In Bootstrap 4 one should use the text-center class to align inline-blocks.

NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">

  <div class="row">

    <div class="col text-center">

      <button class="btn btn-default">Centered button</button>

    </div>

  </div>

</div>

Bootstrap 4 - Vertically Centering List Items

It looks as though flexbox hasn't been applied

Try this:

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
    display: flex;
    justify-content: center;
}

Bootply Demo

Note: there is no CSS method of vertically aligning the contents of elements that do not share a parent with each other. The above aligns the li...not their contents..but seems to have the effect you are looking for.

Vertical Align Center in Bootstrap 4

Important! Vertical center is relative to the height of the parent

If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!

Now, onto vertical centering...

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used on the flexbox parent (row or d-flex).

  • use align-items-center on a flexbox row parent (row or d-flex)
  • use justify-content-center on a flexbox column parent (d-flex flex-column)
  • use my-auto on a flexbox parent

Vertical Center in Bootstrap 5

Bootstrap 4

You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).

Option 1 align-self-center on flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

Sample Image

https://codeply.com/go/BumdFnmLuk

Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd

More on Bootstrap 4 Vertical Centering

Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

vertical center grid columns

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

See this Q/A to center, but maintain equal height

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

More examples
Vertical center image in <div>
Vertical center .row in .container

Vertical center and bottom in <div>
Vertical center child inside parent

Vertical center full screen jumbotron

Important! Did I mention height?

Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...

body,html {
  height: 100%;
}

Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.

Also see:

Vertical alignment in bootstrap 4

Bootstrap Center Vertical and Horizontal Alignment

Bootstrap Center Vertical and Horizontal Alignment

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex).

Centering examples in Bootstrap 5

Vertical center (don't forget the parent must have a defined height!):

  • my-auto for centering inside flex (.d-flex) elements
  • my-auto can be used to center columns (.col-) inside row
  • align-items-center to center columns (col-*) inside row

Horizontal center:

  • text-center to center display:inline elements & column content
  • mx-auto for centering inside flex elements
  • mx-auto can be used to center columns (.col-) inside row
  • justify-content-center to center columns (col-*) inside row

Bootstrap 4.3+ (Update 2019)

There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...

Vertical center:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

the height of the container with the item(s) to center should be 100%
(or whatever the desired height is relative to the centered item)

Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.

Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.

Horizontal center:

  • text-center to center display:inline elements & column content
  • mx-auto for centering inside flex elements
  • offset-* or mx-auto can be used to center columns (.col-)
  • justify-content-center to center columns (col-*) inside row

Vertical Align Center in Bootstrap

Bootstrap 4 full-screen centered form

Bootstrap 4 center input group

Bootstrap 4 horizontal + vertical center full screen


Related Topics

Css3 Transition Click Event

How to Change Background-Color on Text Links on Hover But Not Image Links

Min-Width in Msie 6

CSS to Change the Cursor Style of the Resize Button on a Textarea

Android Webview Border-Radius Aliasing

How to Modify the Strongloop's Loopback Explorer CSS

Set Font Size of Angular Material Tooltip

Span Background-Color & Padding Problems

How to Make Text Take Full Width of It's Container

How to Output Errors When Using .Less Programmatically

Is There a Way for Animation-Timing-Function to Apply to the Entire Animation Instead of Each Keyframe

Unwanted Outline on Border When Parent Is Transformed

How to Change the Color of the Scrollbar for Microsoft Edge

Mobile Orientation Change Not Applying CSS

Chrome 83: Change Colors of New Form Styling

Setting Character Width with CSS

CSS Background Image Disappearing in Chrome

Vertical Scrollbar Leads to Horizontal Scrollbar


Leave a reply



Submit