title: How can I make a Bootstrap 3 button group responsive?
body: <p>I am trying to make the buttons stack on top of each other when I browse the page through my phone. I would leave them to occur on a single line, but the texts inside them are very long and do not appear well when I shrink the page.</p>
  
  <p>Here is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" crossorigin="anonymous" integrity=
      "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;div class="container"&gt;
    &lt;div class="btn-group btn-group-justified btn-group-lg btn-group-vertical"&gt;
      &lt;a href="#" class="btn btn-primary"&gt;
        &lt;font size="6"&gt;الدروس و التجارب&lt;/font&gt;
      &lt;/a&gt;
      &lt;a href="#" class="btn btn-primary"&gt;
        &lt;font size="6"&gt;المنشورات و الكتب الشخصية&lt;/font&gt;
      &lt;/a&gt;
      &lt;a href="#" class="btn btn-primary"&gt;
        &lt;font size="6"&gt;المدونة&lt;/font&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>