BootStrap CSS Margin 0 Auto Not Center


Answer :

Bootstrap 4 use

Use text-center or mx-auto or container-fluid

  1. You could use this hack text-center (this does not only apply for text)

  2. Or use the exact boostrap4 class mx-auto

example class="text-center" or class="mx-auto"

in context

<div class="btn-group text-center"> or <div class="btn-group mx-auto"> 

TRY NOT TO USE inline styles (bad practice)

<div class="btn-group" style="margin:0 auto"> 

References here:

text-center => https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering


You don't need to use inline styles, just apply the class "text-center" which is already included in bootstrap


EDIT: Guillemo Mansilla's answer is better. Same technique but better use of existing Bootstrap classes.

You can set text-align: center on the .container. No need for the margin: 0 auto.

.container {   text-align: center;   margin-top: 100px; } 

http://jsbin.com/oyaDokOw/2/edit


Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?