How to evenly distribute five columns across my screen in bootstrap?

Question

I have 5 columns in Bootstrap 3, as seen in the screenshot below. How to distribute the 5 cols across the screen without spaces in the right and left of it?

Answer 1

You can do this with a parent with 100% width and children with any .col-[whatever you want] class on each child (or just .col on each child if you don't want them to adjust for screen size). Documentation: https://getbootstrap.com/docs/3.3/css/

You can alternatively create your own CSS with a container with width:100% and display:flex, and children that each have width: 20%.

.parent {
  width: 100%;
  display: flex;
}

.child {
  width: 20%;
}