Sometimes when your a web developer you experience little problems called bugs. Well most of the time they're little problems. A bug could be any kind of problem you have with your software. In my case it is a display bug. At first I didn't think there was a problem until I looked at my site on my phone. Usually bootstrap handles the display of the site on mobile. It will rearrange the elements on screen to fit them perfectly. However bootstrap wasn't doing it's job. The site looked terrible on mobile. What was causing this issue?
Was it the version of bootstrap? I changed to a different version of bootstrap and still the site looked shitty. Was it the classes? My markup was copied word for word from the theme and the theme looked great in mobile. So what was the difference between my site and the theme site?
I copied the code from the theme onto my server and the theme looked great. So it couldn't be the web environment. However when I was looking at the head of the theme HTML I notice it had some meta tags. I checked my code and my document head didn’t have any meta tags. So I tried copying the meta tags into the head and tested the mobile site.
It worked! The site looked like the mobile theme from the example on Bootstraps site. The meta tag that made the difference was the viewport one.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Now the site looks great not only on desktop but any device screen.