title: Centering Bootstrap 4 pills to align over each other on small screens
body: <p>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?</p>
  
  <pre><code> &lt;h4 class="h4"&gt;Follow Social Media&lt;/h4&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-6-lg col-4-md col-1-sm center-pills"&gt;
            &lt;ul class="nav nav-pills"&gt;
              &lt;li class="nav-tabs"&gt;
                &lt;a class="nav-link  active social social_f" href="#"&gt;Facebook&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-tabs"&gt;
                &lt;a class="nav-link active social social_i" href="#"&gt;Instagram&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-tabs"&gt;
                &lt;a class="nav-link active social social_y" href="#"&gt;Youtube&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt; 
          &lt;/div&gt;
        &lt;/row&gt;
  </code></pre>
  
  <p>I've tried adding custom css but it keeps falling apart and looks messy.</p>
  
  <p>At the moment, the code above output this:
  <a href="https://i.stack.imgur.com/cut5G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cut5G.png" alt="enter image description here"></a></p>