title: How to create a vertical scroll with tabs inside a bootstrap modal?
body: <p>I have a bootstrap modal that consists of a set of tabs, I want the tabs to appear in a row through the two symbols I put on the image I can go to the tabs on the right and left, how to do that?
  thanks you for your help...</p>
  <p>Here is the picture where the tabs look like this,
  I want them to be in the same row when I click on the symbols to go to other tabs</p>
  <p><a href="https://i.stack.imgur.com/e9GHv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e9GHv.jpg" alt="enter image description here" /></a></p>
  <p>This is my code:</p>
  <pre><code>&lt;button data-toggle=&quot;modal&quot; data-target=&quot;#menu_tab&quot;&gt;Menu&lt;/button&gt;
  
   &lt;div class=&quot;modal fade&quot; id=&quot;menu_tab&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
              &lt;div class=&quot;form-group&quot; id=&quot;font&quot; align='right'&gt;
                  &lt;div class=&quot;form-group&quot; id=&quot;font&quot; align='right'&gt;
                      
                      &lt;fieldset class=&quot;scheduler-border&quot;&gt;
                          &lt;legend class=&quot;scheduler-border&quot;&gt;Menu&lt;/legend&gt;
                              &lt;div class=&quot;form-row&quot;&gt;                            
                                  &lt;div role=&quot;tabpanel&quot;&gt;
  
                                      &lt;ul class=&quot;nav nav-tabs&quot; role=&quot;tablist&quot;&gt;        
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab1&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab1&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab2&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab2&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab3&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab3&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab4&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab4&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab5&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab5&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab6&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab6&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab7&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab7&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab8&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab8&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; class=&quot;active&quot;&gt;
                                          &lt;a class=&quot;nav-link&quot; href=&quot;#Tab9&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;Tab9&lt;/a&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;
                  
                                      &lt;div class=&quot;tab-content&quot;&gt;
                                          &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;Tab1&quot; class=&quot;active&quot;&gt;
                                              &lt;div class=&quot;p-3&quot;&gt;
                                                  tab1 content
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      
                                          &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;Tab2&quot; class=&quot;active&quot;&gt;
                                              &lt;div class=&quot;p-3&quot;&gt;
                                                  tab2 content
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                          &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;Tab3&quot; class=&quot;active&quot;&gt;
                                              &lt;div class=&quot;p-3&quot;&gt;
                                                  tab3 content
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                          &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;Tab4&quot; class=&quot;active&quot;&gt;
                                              &lt;div class=&quot;p-3&quot;&gt;
                                                  tab4 content
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/fieldset&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>