Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 - Center List

I am building an app with the Bootstrap 4 beta. This app is really basic at the moment and has a single inline list. I'm trying to center this list horizontally in the middle of the screen. As shown in this Bootply, I thought justify-content-center would do it. However, that did not work. I tried the other centering classes I saw listed here without any luck. My list looks like this:

<div>
  <ul class="list-inline 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 can I center an inline list with the Bootstrap 4 beta?

like image 400
user687554 Avatar asked Aug 16 '17 13:08

user687554


People also ask

How do I center a list in Bootstrap?

Use text-center OR, Use mx-auto inside a flexbox container ( d-flex ).. mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..).

How do I center a div in Bootstrap 4?

Bootstrap center div vertically and horizontally - code helper. To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.

How do you center an item list?

Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .


2 Answers

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

like image 191
Zim Avatar answered Sep 22 '22 17:09

Zim


If you want to use bootstrap classes then you can use row

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <ul class="list-inline d-flex 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>

Otherwise, Simply text-align:center is enough.

ul.list-inline {
  text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <ul class="list-inline">
    <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>
like image 39
Sankar Avatar answered Sep 21 '22 17:09

Sankar