CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4responsive-design
John w.
John w.

Reputation: 531

Keep row of buttons inline and with overflow x (in the mobile version)

Using the bootstrap I developed a line with buttons.

My problem is that when I reduce the screen to a mobile version, the buttons are not in line, as shown in the image.

Is there a way to always put these buttons in line and if necessary with the overflow-x scroll available?

Demo

  <div class="row justify-content-center" style="margin-top: 160px;">
    <a style="color: #51CC8B;" class="btnP" >Tots
      <span class="nav-link btn-glyphicon1">34</span>
    </a>
    <a style="color: #4981C2;" class="btnR">Drops
      <span class="nav-link btn-glyphicon">6</span>
    </a>
    <a style="color: #4981C2;" class="btnD">Drags
      <span class="nav-link btn-glyphicon">3</span>
    </a>
  </div>

image

Upvotes: 1

Views: 709

Answers (1)

j08691
j08691

Reputation: 207861

Change the outer div to also use the flex-nowrap class:

<div class="row justify-content-center flex-nowrap" style="margin-top: 160px;">

Upvotes: 1

Related Questions