title: Bootstrap 4 mobile site acting like desktop
body: <p>I have a website that's using bootstrap 4. When testing on my computer everything looks okay and properly resized for the screen resolution. Like so:</p>
  
  <p><a href="https://i.stack.imgur.com/M5J3J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M5J3J.jpg" alt="Desktop resized"></a></p>
  
  <p>But then when I load the same page on my mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/J56AA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J56AA.png" alt="enter image description here"></a></p>
  
  <p>It's using the grid layout for a desktop screen. Does anybody know why this is? I've added this <code>meta</code> tag into the header as I was told this will help support mobile devices <code>&lt;meta name="viewport" contain="width=device-width, initial-scale=1.0"&gt;</code>. I don't know what else could be setup wrong!</p>
  
  <p>My <code>&lt;head&gt;</code> code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
  
      &lt;link rel="stylesheet" href="/css/master.css" type="text/css"&gt;
      @yield('css_includes')
  
      &lt;meta name="viewport" contain="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      @yield('navbar')
  
      &lt;div class="container-fluid h-100"&gt;
          @yield('content')
      &lt;/div&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      @yield('page_scripts')
      @stack('extra_scripts')
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code for the navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
  &lt;a class="navbar-brand" href="/"&gt;Order Happy&lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_content" aria-controls="navbar_content" aria-expanded="false" aria-label="Toggle Navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
  &lt;/button&gt;
  
  &lt;div class="collapse navbar-collapse" id="navbar_content"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item {{ request()-&gt;is($business-&gt;business_slug) ? 'active' : '' }}"&gt;
              &lt;a class="nav-link" href="/{{ $business-&gt;business_slug }}"&gt;{{ $business-&gt;name }}&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item {{ request()-&gt;is($business-&gt;business_slug . "/basket") ? 'active' : '' }}"&gt;
              &lt;a class="nav-link" href="/{{ $business-&gt;business_slug }}/basket"&gt;Basket &lt;span class="badge badge-light"&gt;{{ $basket_quantity }}&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>