Centering li col-md-5

Question

Is there any graceful way to center a group of .col-md-5?

I have a ul and in the ul I have a list of li's that stack next to each other in two columns. I need to center this ul, but everything I come up with either doesn't work or is ugly.

My code is below.

<div class="container">
                
                    <ul class="row">
                    
                    
                    <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li><li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li><li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
                      <li class="col-md-5">
                        <span class="circle alert-primary">3</span>
                        <span>Name</span>
                    </li>
    </ul>
    </div>

and an example below.

https://www.bootply.com/HBsEFFrrGw

Possible duplicate of [Center a column using Twitter Bootstrap 3](https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3) — Rob, Jan 05 '18 at 16:38

score 1 · Accepted Answer · answered Jan 05 '18 at 16:44

You can just use justify-content-center class on your row

<div class="container">

  <ul class="row justify-content-center">
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>
    <li class="col-md-5">
      <span class="circle alert-primary">3</span>
      <span>Name</span>
    </li>




  </ul>
</div>


<div id="push"></div>

Updated Bootply

Thank you. I've never heard of that class before! – zazvorniki Jan 05 '18 at 17:11 — zazvorniki, Jan 05 '18 at 17:11

score 1 · Answer 2 · answered Jan 05 '18 at 16:51

1

Use .col-md-6 and replace margin by padding with warp div and modify css

li > div{
 border:1px solid lightgray;
 padding:1em
}

example https://www.bootply.com/S1vwo3AfdO

answered Jan 05 '18 at 16:51

Vol4N3

11
1

Curt Husting · Answer 3 · 2018-01-05T16:55:59.947

0

You could do an nth-child() selector, something like this;

@media (min-width: 768px) {
  li.col-md-5:nth-child(odd) {
    margin-left: 8.333333%; // set to whatever you need to center them
  }
}

OR add justify-content-center class to the row and let bootstrap handle the rest - note this will center the last item as well which may not be the desired outcome

edited Jan 05 '18 at 16:55

answered Jan 05 '18 at 16:49

Curt Husting

248
2
8

Centering li col-md-5

3 Answers3