Bootstrap buttons mobile sizing issue

Question

I have two Bootstrap buttons below:

<div class="row">
    <div class="col-sm-6 col-xs-6 col-xxs-12">
            <button class="btn editReport">Edit Report</button>
    </div>
    <div class="col-sm-6 col-xs-6 col-xxs-12">
            <button class="btn pull-right submitReport">Submit Report</button>
    </div>
</div>

Desktop view

"Edit Report" button is on the left of the page, and "Submit Report" button is on the right side of the page. It works fine on normal desktop view, but there is an issue with mobile view.

Running into issues like below:

and

Google around but didn't help. How can I make these two buttons stay on the top and below each other, and align to the middle on mobile view?

Thanks.

score 0 · Accepted Answer · answered Nov 03 '17 at 20:54

The issue you're reporting on must only occur on extremely small mobile devices; smaller than even what you might see on an iPhone 4 series. That being said, one option is to responsively hide certain redundant items so that the buttons are smaller.

You could wrap the word 'Report' (and its preceding space) in .hidden-xs to hide that word when working on smaller devices.

<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-fluid">
  <div class="row">
    <div class="col-xs-6">
      <button class="btn btn-default">Edit<span class="hidden-xs"> Report</span></button>
    </div>
    <div class="col-xs-6 text-right">
      <button class="btn btn-default">Submit<span class="hidden-xs"> Report</span></button>
    </div>
  </div>
</div>

Note: The above code also cleans up some poor syntax (.col-xs-6 and .col-sm-6 are redundant; .pull-right is unnecessary if you simply apply .text-right to the column, etc).

Bootstrap buttons mobile sizing issue

1 Answers1