Clarify when .mx-auto can be used
Clarify when .mx-auto can be used
Created by: dinophile
.mx-auto adds the margin-left:auto and margin-right:auto attributes but the browser will not center the elements that it is set on. I don't have any other element surround the button I'm trying to center other than the body tag. The body tag has no classes applied to it either.
Tested it on various elements such as the following (all of course nested within a div with the class .container):
<p class="mx-auto">Hello?</p> and
<button type="button" class="btn btn-lg mx-auto">Hello?</button>
The following also fails to center (bootstrap.min.css is alpha 5, downloaded November 13 2016):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary btn-lg mx-auto">HELP!</button>
</div>
</body>
</html>Browser does not position elements as expected with auto left and right margins. Inspecting the elements shows that the values are in fact set to auto on the margins. But there is no visual effect in the browsers at any screen size. (Chrome stable and Chromium stable both used)
The only way I could center my component was to give the .container div the class of text-xs-center.
Ran all examples through validators and lint. Example included in JSBin link below. Cannot find duplicate issue, nor example on any search.
- Operating system and version: Ubuntu 16.04 LTS (64-bit)
- Browsers and version:
Chromium Version 53.0.2785.143 Built on Ubuntu
Chrome Version 54.0.2840.100 (64-bit) - Reduced Test Case: http://jsbin.com/gefiladofu/edit?html,output