Manchestor Laljii
Manchestor Laljii

Reputation: 73

Bootstrap is not working on mobile devices

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mysite/css/jquery-ui.css">
<script src="mysite/js/jquery-1.12.4.js"></script>
<script src="mysite/js/jquery-ui.js"></script></head><body><nav class="navbar navbar-default" data-spy="affix" data-offset-top="197" role = "navigation">
<div class="container-fluid">
  <div class="navbar-header">
    <button type = "button" class = "navbar-toggle" 
     data-toggle = "collapse" data-target = "#example-navbar-collapse">
     <span class = "sr-only">Toggle navigation</span>
     <span class = "icon-bar"></span>
     <span class = "icon-bar"></span>
     <span class = "icon-bar"></span>
  </button>
  <a class="navbar-brand" href="mysite/Dashboard.php"><img src='mysite/img/logo43.png'></a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class="nav navbar-nav">
        <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Stock
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="mysite/update.php">Change Stock</a></li>          <li><a href="mysite/search.php">Stock Details</a></li>          <li><a href="mysite/totalstock.php">Total Stock</a></li>          <li><a href="mysite/report.php">Item Movement</a></li>        </ul>
  </li>
              <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Add
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="mysite/add/addItem.php">Add Item</a></li>          <li><a href="mysite/add/addBrands.php">Add Brand</a></li>          <li><a href="mysite/add/addCategory.php">Add Category</a></li>          <li><a href="mysite/add/addUser.php">Add User</a></li>        </ul>
  </li>
              <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">All Operations
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="mysite/view/viewStock.php">All Items</a></li>            <li><a href="mysite/view/viewBrand.php">All Brands</a></li>          <li><a href="mysite/view/viewCategory.php">All Categories</a></li>          <li><a href="mysite/view/viewUser.php">All Users</a></li>        </ul>
  </li>
      <li><a href="mysite/dailyreport.php">Daily Report</a></li>    </ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Welcome burhantec</a></li>
  <li><a href="mysite/logout.php"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
</ul>
</div>
</div>
</nav><div class='alert alert-success'><strong>Hello ! </strong>Welcome to Mysite Technology Computer Company, It is a great honour to have you in our team.</div>
<script src="mysite/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="mysite/css/bootstrap.min.css">
  <style>
   body {
     background: rgba(38, 102, 157, 0.87);
     color: white;
   }
   .td-center{
    text-align: center;
   }
   .th-center{
        text-align: center;
   }
   input{
    color: black;
   }
   input.userlogin{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.2);
    width: 250px;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    font-weight: 300;
    }
    input.userlogin:focus{
        left: -10%;
        position: relative;
        width: 120%;
    }
    .btnlogin{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        width: 250px;
        border-radius: 3px;
        padding: 10px 15px;
        margin: 0 auto 10px auto;
        display: block;
        text-align: center;
        font-size: 18px;
        color: white;
        -webkit-transition-duration: 0.25s;
        transition-duration: 0.25s;
        font-weight: 300;
        background-color: white;
        color: rgba(38, 102, 157, 0.87);
    }
    .btnlogin:hover{
        color: white;
        background-color: rgba(38, 102, 157, 0.87);
        cursor: pointer;
    }
    .navbar-inverse {
        background-color: #002E56;

    }
    .affix {
          top: 0;
          width: 100%;
          z-index: 99;
      }

      .affix + .container-fluid {
          padding-top: 70px;
      }
      th.td-center{
        background-color: #F5AC56;
      }
      .export-message{
        position: absolute;
        top: 120px;
        right: 120px;
      }
      .modal-content {
        background-color: #5f7a92;
      }
      .mg-left{
        margin-left:20px;
      }
      .mg-top{
        margin-top: 20px;
      }
      .mg-bottom{
        margin-bottom: 20px;
      }
    </style>
    <script type="text/javascript">
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true,true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });
    </script>
    </body></html>

It is not unfortunately responsive on my mobile & Desktop Google Chrome when tried mobile view, But when I tried mobile view on desktop mozilla firefox It is working..

I am using Bootstrap Jquery UI for this web app

Upvotes: 0

Views: 2005

Answers (1)

Frank W.
Frank W.

Reputation: 787

Try adding the following line between the <head></head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1">

This should help, if you also want to make the content of your website responsive. Have a look at the bootstrap grid system like I suggested before.

Upvotes: 3

Related Questions