In chrome dev tools I get mobile view, but live bootstrap just seems to give me mini version of site
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" content="chrome=1">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/home-slider.css">
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-xs-12 col-sm-3 sidenav">
<div class="navbar-header navbar navbar-default">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<div id="logo-div">
<img id="tri-img" src="src/dist/image/...jpg" alt="logo" />
</div>
<h4 id="title">Title</h4>
<h4 id="subtitle">Subtitle</h4>
<ul class="nav">
<li><a href="index.html"><span class="liner">Home</span></a></li>
<li class="port-main-title"><a href="portfolio.html" data-target="#item2" data-toggle="collapse" data-parent="#stacked-menu">Portfolio<span class="caret arrow"></span></a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="process.html">Process</a></li>
<li><a href="contact.html">Contact</a></li>
</ul><br>
</div>
</div>
<!-- begin carousel -->
<div class="col-xs-12 col-sm-9">
<div id="carousel" class="carousel carousel-fade" data-ride="carousel-fade" data-interval="5000" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item img-responsive center-block active">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-leftt" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/ carousel -->
</div>
<!-- / carousel -->
</div>
</div>
<script type="text/javascript">
$(function() {
$('#myCarousel').carousel();
});
</script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<!-- build:js scripts/main.js -->
<script src="./js/main.js"></script>
<!-- <script src="js/bootsnipp.js" charset="utf-8"></script> -->
<script src="./js/slide.js" charset="utf-8"></script>
</body>
</html>I've not used bootstrap before and thought I've followed the rules. Again, on my chrome device tools and browser simulators like ipadpeek and responsusimulator it seems to work, but not on live devices like android mobile or tablet?
