Centering Bootstrap 4 pills to align over each other on small screens - alignment

Question

Is there a built-in Bootstrap 4 trick that will align these three to centre, in a line "on a large screen", with a small space between them, then place them over each other when displayed on a small screen?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
I've tried adding custom css but it keeps falling apart and looks messy.
At the moment, the code above output this:

Answer 1

Is there a build in bootstrap 4 trick that will align these three to centre
One of the first tricks is to use Bootstrap classes that actually exist.
col-6-lg col-4-md col-1-sm classes don't exist.
The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.
The mx-auto class needs to be added to the column to center it.
Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>