Bootstrap Grid system displaying rows of 6 rather than the desired rows of 3 for large screen-CodePudding

May be a newbie question. I am trying to create 2 rows with 3 sections each. But for some reason even when i set , the sections still take up boxes like it is Basically I wanted to have 6 squares inside instead of 6 rectangles

From my understanding, col-lg-4 should take 33% of the container therefore creating a row of 3 I have set it up here but it seems that it does not want to work and I do not have a clue why

.bookshelf {
    background-color: #564E52;
    width: 1100px;
    height: 700px;
    display: flex;
    margin: 100px auto 100px auto;
    border: 20px solid #7F5822;
}
@media (max-width: 800px){
    .bookshelf{
        width: 900px;
        height: 500px;
    }
}
#section1 {

    border: 20px solid #7F5822;
}

#section2 {
    border: 20px solid red;
}

#section3 {
    border: 20px solid purple;
}

#section4 {
    border: 20px solid green;
}

#section5 {
    border: 20px solid yellow;
}

#section6 {
    border: 20px solid pink;
}

<!doctype html>

<html>
    <head>
        <meta lang="en-US">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>penpal</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">

    </head>
    <body>

        <div id="main" class="container-fluid">
            <div class="wrapper">
                <div class="bookshelf">
               
                    
                       <span id="section1" class="col-sm-6 col-lg-4">

                       </span>

                       <span id="section2" class="col-sm-6 col-lg-4">

                       </span>

                       <span id="section3" class="col-sm-6 col-lg-4">

                       </span>

                      <span id="section4" class="col-sm-6 col-lg-4">

                      </span>

                       <span id="section5" class="col-sm-6 col-lg-4">

                       </span>

                       <span id="section6" class="col-sm-6 col-lg-4">

                       </span>
                </div>
            </div>
        </div>

    </body>

</html>

CodePudding user response：

Use .row class with .bookshelf

CodePudding user response：

All columns should be wrapped in an element with class 'row'. Change this:

<div id="main" class="container-fluid">
   <div class="wrapper">
      <div class="bookshelf">

Into this:

<div id="main" class="container-fluid">
   <div class="wrapper">
      <div class="row bookshelf">

Basically I wanted to have 6 squares inside instead of 6 rectangles

Use aspect-ratio: 1 / 1; on your columns to make them square, like this:

<span id="section1" class="col-sm-6 col-lg-4" style="aspect-ratio: 1 / 1;">