Bootstrap columns stacking vertically instead of horizontally

.card {
  height: 600px;
  width: 800px;
  background-color: darkseagreen;
  padding: 20px;
}

.box1 {
  background-color: floralwhite;
}

.box2 {
  background-color: rgb(238, 185, 80);
}

.box3 {
  background-color: indianred;
}

.box4 {
  background-color: rgb(137, 137, 235);
}

.box5 {
  background-color: rosybrown;
}

.box6 {
  background-color: sienna;
}

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row card mx-auto">
    <div class=" col-4 box box1">BOX1</div>
    <div class=" col-4 box box2">BOX2</div>
    <div class=" col-4 box box3">BOX3</div>
    <div class=" col box box4">BOX4</div>
    <div class=" col box box5">BOX5</div>
    <div class=" col box box6">BOX6</div>
  </div>
</div>

I have been trying to use the bootstrap grid to create a grid however the columns are stacking vertically instead of horizontally. I am trying to achieve a grid like on the picture:

Solution

It's because you're using the class card.

card is a builtin class name for bootstrap which aligns the items inside of it vertically.

You can simply rename the class card to anything else like card2 and it will work.

Working Example:

https://jsfiddle.net/es318vm7/1/

.card2 {
  height: 600px;
  width: 800px;
  background-color: darkseagreen;
  padding: 20px;
}

.box1 {
  background-color: floralwhite;
}

.box2 {
  background-color: rgb(238, 185, 80);
}

.box3 {
  background-color: indianred;
}

.box4 {
  background-color: rgb(137, 137, 235);
}

.box5 {
  background-color: rosybrown;
}

.box6 {
  background-color: sienna;
}

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row card2 mx-auto">
    <div class=" col-4 box box1">BOX1</div>
    <div class=" col-4 box box2">BOX2</div>
    <div class=" col-4 box box3">BOX3</div>
    <div class=" col box box4">BOX4</div>
    <div class=" col box box5">BOX5</div>
    <div class=" col box box6">BOX6</div>
  </div>
</div>