title: Bootstrap - button display on mobile & desktop
body: <p>How can I change buttons below to display correctly on phones?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container-fluid bg-1 text-center"&gt;
      &lt;div class="row text-center" style="display:inline"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-lg-4" style="float:right;"&gt;
                  &lt;a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s"&gt;QUESTIONS AND ANSWERS&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s"&gt;REGISTER&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s"&gt;CONTACT&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;          
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.btn {
      letter-spacing: 1px;
      text-decoration: none;
      background: none;
      -moz-user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 0;
      cursor: pointer;
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
      white-space: nowrap;
      font-size:14px;
      line-height:20px;
      font-weight:700;
      text-transform:uppercase;
      border: 3px solid;
      padding:8px 20px;
  
      margin-top:10px;}
  
  .btn-outlined {
      border-radius: 0;
      -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
              transition: all 0.3s;}
  
  .btn-outlined.btn-white {
      background: none;
      color: #FFFFFF;
      border-color: #FFFFFF;}
  
  .btn-outlined.btn-white:hover,
  .btn-outlined.btn-white:active {
      color: #6f5499;
      background: #FFFFFF;
      border-color: #FFFFFF;}
  
  .btn-xs {
      font-size:11px;
      line-height:14px;
      border: 1px solid;
      padding:5px 10px;}
  
  .btn-sm {
      font-size:12px;
      line-height:16px;
      border: 2px solid;
      padding:8px 15px;}
  
  .btn-lg {
      font-size:18px;
      line-height:22px;
      border: 4px solid;
      padding:13px 40px;}
  </code></pre>
  
  <p>I want effect on desktop:</p>
  
  <p><img src="https://i.stack.imgur.com/rUpSy.jpg" alt="good_mobile"></p>
  
  <p>+ responsive buttons on phones with full text display. I think the problem is with grids, but when I change to other values I get the same issue.</p>