title: Bootstrap columns dynamic
body: <p>I'm having some problems with the columns. I supposed to have 5 columns for md and larger devices and 4 for sm and 3 for xs. The thing is that in large screens all my columns are on the left part of the screen. I've been going through my code but can't find out why it's been like this.</p>
  
  <p>Right now it is like this:
  <a href="https://i.stack.imgur.com/a9CZe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a9CZe.png" alt="enter image description here"></a></p>
  
  <p>Essentially I want it to be like this, and preferably centered within each column (without having words stacked on each other):
  <a href="https://i.stack.imgur.com/rXmea.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rXmea.png" alt="enter image description here"></a></p>