Bootstrap - Center row content below certain breakpoint - css

Question

I have the following grid system in bootstrap v4:
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto align-self-center">
<img src="test" class="logo img-responsive">
</div>
<div class="col-sm-auto align-self-center">
<table class="table-responsive">
<tbody>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
This should have the image side-by-side with the table for screens larger than 'small' and stack them for screens smaller. This works perfectly.
Currently, everything is left-justified. I would like the row to be left justified when the columns are side-by-side (screen > "small"), but to be centred when the columns are stacked (screen < "small").
I have tried adding justify-content-center to the row, but this centres both configurations (until the screen reaches extra small, at which point it once again left-justifies...)
Not particularly helpful (because the screen is always small) fiddle: https://jsfiddle.net/aq9Laaew/133123/

Answer 1

The problem with using col-sm-auto is that the columns become full width on <sm screens, and therefore the table is full width which doesn't appear centered.
Instead, use col-auto col-sm mx-auto on the 2nd column so that it shrinks to the width of the table on <sm screens...
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto text-center">
<img src="//gradientjoy.com/300x200" class="logo img-fluid">
</div>
<div class="col-auto col-sm mx-auto">
<table class="table-responsive">
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
</div>
</div>
</div>
https://www.codeply.com/go/0n3i9EGgS7

Answer 2

You should use .mx-lg-auto or .mx-md-auto classes (depending on your preferable breakpoint).
Documentation here.

Answer 3

You can overwrite the left/right margin on certain screen sizes using the ml-lg-0 mr-lg-0 classes (swap out 'lg' for the screen size you want the content to start being left justified at). That way you can use mx-auto to center content on small screens sizes but left justify it instead once the viewport reaches a certain width.

Answer 4

.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
tbody {
display:inline;
width:100%;
}
#media only screen and (max-width: 768px) {
.row, table {
text-align:center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-auto align-self-center">
<img src="test" class="logo img-responsive">
</div>
<div class="col-sm-auto align-self-center">
<table class="table-responsive">
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
</div>
</div>
</div>
Try this code...I have mentioned jsfiddle link also...It works for you.
Added new styles are as below,
tbody {
display:inline;
width:100%;
}
#media only screen and (max-width: 768px) {
.row, table {
text-align:center;
}
}
https://jsfiddle.net/Sampath_Madhuranga/2sk5bf7t/1/