title: How can I adjust bootstrap4 breakpoints?
body: <p>I'm using bootstrap to set break points, I want a certain image to be hidden on small devices, and appear as the screen gets bigger
  so I used this code:</p>
  <pre><code>&lt;a href=&quot;index.html&quot; class=&quot;navbar-brand d-none d-md-block&quot;&gt;
    &lt;img src=&quot;logo.jpg&quot; alt=&quot;logo image&quot; class=&quot;brand&quot;&gt;
  &lt;/a&gt;
  </code></pre>
  <p>I'm expecting the logo to appear at screen size of 768px, but it actually appears at 844px.
  this goes for every element in the page.</p>
  <p>I used chrome and fire fox and got the same problem, also the problem exists if I use sm or lg
  what could be the reason?</p>