How can I make a Bootstrap 3 button group responsive?

Question

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.

Here is my code.

<link rel="stylesheet" crossorigin="anonymous" integrity=
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="btn-group btn-group-justified btn-group-lg btn-group-vertical">
    <a href="#" class="btn btn-primary">
      <font size="6">الدروس و التجارب</font>
    </a>
    <a href="#" class="btn btn-primary">
      <font size="6">المنشورات و الكتب الشخصية</font>
    </a>
    <a href="#" class="btn btn-primary">
      <font size="6">المدونة</font>
    </a>
  </div>
</div>

Answer 1

As far as I can tell, there is nothing built into Bootstrap to do this. However, it can be done using some custom CSS on top of Bootstrap. We can explicitly stack the buttons on small screens.

For this, I have used the breakpoint that Bootstrap uses for anything smaller than desktops. This can be modified easily if you want to. If you want to read more about media queries, I can recommend this MDN article (link goes to part about width, but all of article is interesting).

@media (max-width: 991px) {
  .btn-group.my-btn-group-responsive > .btn {
    display: block;
    width: 100%;
  }
  
  /* making the border-radius correct */
  .btn-group.my-btn-group-responsive > .btn:first-child {
    border-radius: 6px 6px 0 0;
  }
  .btn-group.my-btn-group-responsive > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 6px;
  }
  .btn-group.my-btn-group-responsive > .btn:last-child:not(:first-child) {
    border-radius: 0 0 6px 6px;
  }
  
  /* fixing margin */
  .btn-group.my-btn-group-responsive .btn + .btn {
    margin-left: 0;
  }
  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="btn-group btn-group-justified btn-group-lg my-btn-group-responsive">
    <a href="#" class="btn btn-primary"><font size="6">الدروس و التجارب</font></a>
    <a href="#" class="btn btn-primary"><font size="6">المنشورات و الكتب الشخصية</font></a>
    <a href="#" class="btn btn-primary"><font size="6">المدونة</font></a>
  </div>
</div>

Answer 2

If I got your question right you want the button one on every line. With bootstrap you can do as follows and open some rows and insert your button inside.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="btn-group btn-group-justified btn-group-lg btn-group-vertical">
    <div class="row">
      <a href="#" class="btn btn-primary">
        <font size="6">الدروس و التجارب</font>
      </a>
    </div>
    <div class="row">
      <a href="#" class="btn btn-primary">
        <font size="6">المنشورات و الكتب الشخصية</font>
      </a>
    </div>
    <div class="row">
      <a href="#" class="btn btn-primary">
        <font size="6">المدونة</font>
      </a>
    </div>

  </div>
</div>

Also you can add the col class to the button and select the column dimensions for every button like so:

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <button>[...]</button>
        <button>[...]</button>
    </div>
</div>