.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/[email protected]/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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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:

CodePudding user response：

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/[email protected]/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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You will have to change your container name card to something else

the .card class is one of the in-built components of bootstrap which can not be used

Check the fiddle below and adjust your elements as per your requirements.

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

.box {
  min-height:150px;
  margin:10px;
  padding:10px;
}

.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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


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

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>