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?
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..).
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.
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; .
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With