Stop bootstrap stacking on mobile

Question

So I have a row within a row to allow me to position 3 buttons spaced out how I like at the bottom of a page. It looks fine on desktop and tablet but on mobile it stacks them and the col-xs-4 div is full width instead of being 1/3 its container. Is there something I can change so that the circle's are not stacked?

Relevant code:

    <div class="row buttonBottom">
        <div class="col-md-4 col-xs-2 col-sm-2"></div>
        <div class="col-md-4 col-xs-8 col-sm-8">
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3"></div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle jetblack"></div>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle gold"></div>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle white"></div>
              </div>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3"></div>
          </div>
        </div>
        <div class="col-md-4 col-xs-2 col-sm-2"></div>
      </div>

can you please provide working snippet code..? – ankita patel Sep 08 '17 at 09:06 — ankita patel, Sep 08 '17 at 09:06

score 4 · Accepted Answer · edited Mar 08 '20 at 12:40

4

Bootstrap 4

Use the extra small breakpoint (note -xs has been removed)...

<div class="col-md-4 col-2">

Check out the documentation on that: https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes

edited Mar 08 '20 at 12:40

Carol Skelly

351,302
90
710
624

answered Sep 08 '17 at 09:13

kevinius

4,232
7
48
79

Stop bootstrap stacking on mobile

1 Answers1