title: bootstrap not working on mobile (Python flask)
body: <p>I am creating a sort of website portfolio with the Python flask framework. The html page looks fine in chrome even with the mobile preview. But the bootstrap does not seem to be working when I view the page on my iphone 7plus. The list items and the image classes do not seem to be working. What seems to be the problem here? Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"&gt;
      &lt;!-- Custom CSS --&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}"&gt; 
      &lt;title&gt;Talal Najam&lt;/title&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
   &lt;nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark pl-400"&gt;
      &lt;div class="container"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Talal Najam&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" 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="navbarsExampleDefault"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item "&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item "&gt;
          &lt;a class="nav-link" href="https://github.com/mistat44" target="_blank"&gt;Github&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item nav-link disabled"&gt;
         &lt;del&gt;Dev Info&lt;/del&gt;
        &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="fake-body"&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="text-center mb-3 bodbot"&gt;
              &lt;img class="rounded-circle img-fluid" height="300px" width="200px" src="{{ url_for('static', filename="img/default.jpg") }}"&gt;
              &lt;h1&gt;Talal Najam&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
  
              &lt;!-- Not So Nerd Stuff --&gt;
              &lt;div class="col-md-6 col-sm-12 main-content"&gt;
                  &lt;div id="textt-body" class="text-body"&gt;
                      &lt;div class="text-inner projects"&gt;
                          &lt;h2 style="padding-bottom: 0.4rem"&gt;Projects&lt;/h2&gt;
                          &lt;ul class="list-group dec text-justify"&gt;
                              &lt;li class="list-group-item pl-3 pr-3"&gt;&lt;a target="_blank" class="nodec" href="https://github.com/mistat44/sentiment-analysis-using-machine-learning"&gt;Sentiment Analysis using supervised Machine Learning&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="list-group-item pl-3 pr-3"&gt;&lt;a target="_blank" class="nodec" href="https://github.com/mistat44/dota2stats"&gt;Dota 2 Stats tracking Flask Web Application&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="list-group-item pl-3 pr-3"&gt;&lt;a target="_blank" class="nodec" href="https://github.com/mistat44/twitch-chatbot"&gt;Twitch Chat Bot&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="list-group-item pl-3 pr-3"&gt;&lt;a target="_blank" class="nodec" href="https://github.com/mistat44/dash_app"&gt;Dash Live Sentiment Analysis&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="list-group-item pl-3 pr-3"&gt;&lt;a target="_blank" class="nodec" href="https://github.com/mistat44/dash_app"&gt;Slack Joke Bot&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>