title: Button missing when viewing in mobile browser (Bootstrap)
body: <p>I have made a webpage - <a href="http://campusconnect.cc/college.html" rel="nofollow">Campus Connect - Colleges</a>. However, viewing this on mobile hides the button of the groups. And also, the buttons don't appear centered.</p>
  
  <p>The whole page code is - </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" hola_ext_inject="disabled"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;
    &lt;link rel="icon" href="http://getbootstrap.com/favicon.ico"&gt;
    &lt;link rel="stylesheet" type="text/css" href="fonts/glyphicons-halflings-regular.eot"&gt;
    &lt;title&gt;Campus Connect&lt;/title&gt;
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
    &lt;style type="text/css"&gt;
       .colorb:hover{
       background-color: #F5D357 !important;
       }
       .colorb:active{
       background-color: #F5D357 !important;
       }
    &lt;/style&gt;
    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="css/sticky-footer-navbar.css" rel="stylesheet"&gt;
    &lt;!-- Just for debugging purposes. Don't actually copy these 2 lines! --&gt;
    &lt;!--[if lt IE 9]&gt;&lt;script src="../../assets/js/ie8-responsive-file-warning.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;script src="js/ie-emulation-modes-warning.js"&gt;&lt;/script&gt;
    &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
    &lt;!--[if lt IE 9]&gt;
    &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
     &lt;body style="background-image:url('images/bkg.jpg');background-size:cover;background-repeat:no-repeat;"&gt;
    &lt;!-- Fixed navbar --&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top" style="background-color:#383838;border:0;"&gt;
       &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
             &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
             &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
             &lt;span class="icon-bar"&gt;&lt;/span&gt;
             &lt;span class="icon-bar"&gt;&lt;/span&gt;
             &lt;span class="icon-bar"&gt;&lt;/span&gt;
             &lt;/button&gt;
             &lt;div class="navbar-brand" style="padding:0;"&gt;&lt;img src="images/logo.png" style="width:200px;height:100%;" onClick="document.location.href='app_index.html';"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
             &lt;!--   &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt; --&gt;
             &lt;ul class="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;a target="_blank" href="https://play.google.com/store/apps/details?id=com.campusconnect" style="color:#EBD07B;"&gt;Get the App&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/android.png" class="img-responsive img-circle" alt="App" style="width:40px;height:40px;text-align:center;margin-top:5px;padding-top:5px;padding-bottom:5px;border: 2px solid #EBD07B;border-radius: 25px;"&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/.nav-collapse --&gt;
       &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- Begin page content --&gt;
    &lt;div class="container"&gt;
       &lt;div class="page-header"&gt;
          &lt;h2 id="coll_name" style="text-align:center;"&gt;&lt;/h2&gt;
       &lt;/div&gt;
       &lt;div class="row"&gt;
          &lt;div class="col-md-3 col-md-offset-1"&gt;
             &lt;div style="text-align:center;"&gt;
                &lt;span aria-hidden="true" style="font-size:50px;"&gt;&lt;img src = "calendar.png"/&gt;&lt;/span&gt;
             &lt;/div&gt;
             &lt;br/&gt;
             &lt;div style="font-size:20px;"&gt;
                &lt;p style="text-align:center;" id="event_no"&gt;&lt;/p&gt;
                &lt;p style="text-align:center;"&gt;Events Happening Today&lt;/p&gt;
             &lt;/div&gt;
             &lt;button type="button" class="btn btn-info colorb" style="margin-left:30%;background-color:transparent;border-color:black;color:black;" onclick="location.href='calendar.html';"&gt; Calendar&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 col-md-offset-3"&gt;
             &lt;div style="text-align:center;"&gt;
                &lt;span aria-hidden="true" style="font-size:50px;"&gt;&lt;img src = "groups.png"/&gt;&lt;/span&gt;
             &lt;/div&gt;
             &lt;br/&gt;
             &lt;div style="font-size:20px;"&gt;
                &lt;p id="group_no" style="text-align:center;"&gt;&lt;/p&gt;
                &lt;p style="text-align:center;"&gt;Groups On Campus&lt;/p&gt;
             &lt;/div&gt;
             &lt;button type="button" class="btn btn-success colorb" style="margin-left:30%;background-color:transparent;border-color:black;color:black;" onclick="location.href='groups.html';"&gt;Explore Groups&lt;/button&gt;&lt;/a&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer class="footer" style="background-color:#383838;height:100px"&gt;
       &lt;div class="container"&gt;
          &lt;div class="row" style="text-align:center;"&gt;
             &lt;img src="images/facebook_circle.png" style="width:40px;height:40px;margin-top:2px;"&gt;
          &lt;/div&gt;
          &lt;div class="row" style="text-align:center;color:white;"&gt;
             &lt;p&gt;Copyright 2015 Campus Connect&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="row" style="text-align:center;color:white;"&gt;
             &lt;p&gt;Made with &lt;img src="images/heart.png" style="height:20px;"&gt; in Bangalore&lt;/p&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/footer&gt;
    &lt;!-- Bootstrap core JavaScript
       ================================================== --&gt;
    &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
    &lt;script src="js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
       function init(){
         gapi.client.load('xxxx', 'v1',loaded, 'xxxxx');
       }
       function loaded(){
         var col_name = localStorage.getItem('CollegeName');
         var col_id = localStorage.getItem('CollegeId');
         document.getElementById('coll_name').innerHTML = col_name;
         gapi.client.clubs.getClubList({'college_id':col_id}).execute(function(resp) {
                     console.log("Here and there");
                     console.log(resp.result.list.length);
                     console.log("Done here");
                      document.getElementById('group_no').innerHTML= resp.result.list.length;
                });
         now_date = getDate();
         gapi.client.clubs.collegeFeed({'collegeId':col_id,'date':now_date}).execute(function(resp){
           console.log('Success');
            console.log(resp);
            var flag;
            if (resp.result.length === undefined)
            {
             flag = 0;
            }
            else
            {
               flag = resp.result.length;
            }
             document.getElementById('event_no').innerHTML=flag;
           });
         function getDate()
         {
           var today = new Date();
           var dd = today.getDate();
           var mm = today.getMonth()+1; //January is 0!
           var yyyy = today.getFullYear();
         today = yyyy+'-'+mm+'-'+dd;
         //final_date = '"'+today+'"';
         console.log(today);
         return today;
         }
       }
    &lt;/script&gt;
    &lt;script src="https://apis.google.com/js/client.js?onload=init"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What is the error? And how do I fix this ?</p>