CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kilax31
Kilax31

Reputation: 35

Bootstrap - aquire certain grid (column under column)

I'm trying to replicate a grid made in Excel using bootstrap grid system. What I managed to get so far is this:

 .col-sm-5{
        border:1px solid red;
       height:20%;

    }
    .col-sm-2{
        border:1px solid blue;
    }
    .col-sm-1{
        border:1px solid grey;
    }
    .col-sm-4{
        border:1px solid green;
    }
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-5">Graph</div>
        <div class="col-sm-2">Box1</div>

        <div class="col-sm-2">Box2</div>
        <div class="col-sm-2">Box3</div>
        <div class="col-sm-1">Box4</div> <!-- will be empty -->
    </div>
    <div class="row">
        <div class="col-sm-4">Graph Extra 1</div>
        <div class="col-sm-4">Graph Extra 2</div>
        <div class="col-sm-4">Graph Extra 3</div>
    </div>
</div>
</body>

The layout I'm trying to replicate is this:

layout

So basically , I tried using <div class="w-100"></div> but from the results I've seen, it's probably not what I'm looking for as it moves everything on a new line.

So I would like to add another column under Box 1 , another 2 under Box 2 and then for the box 3 I guess I would increase the height to match the other columns.

I'm trying to find the best way , the responsive way to accomplish this.

Also , does anyone know how could I accomplish a replica of this excel chart? Would chart.js work along with angularjs for the data feed?

Thank you!

Upvotes: 2

Views: 92

Answers (2)

Tommy
Tommy

Reputation: 2453

To subdivide containers you can insert a row again followed by col-12 for a full column:

    .col-sm-5{
       border:1px solid red;
       height:120px;

    }
    .col-sm-2{
        border:1px solid blue;
    }
    .col-sm-1{
        border:1px solid grey;
    }
    .col-sm-4{
        border:1px solid green;
    }
    .col-12{
        border:1px solid orange;
    }
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-5">Graph</div>
        <div class="col-sm-2">Box1</div>

        <div class="col-sm-2">
            <div class="row">
                <div class="col-12">
                    Box2 (A)
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    Box2 (B)
                </div>
            </div>
        </div>
        <div class="col-sm-2">Box3</div>
        <div class="col-sm-1">Box4</div> <!-- will be empty -->
    </div>
    <div class="row">
        <div class="col-sm-4">Graph Extra 1</div>
        <div class="col-sm-4">Graph Extra 2</div>
        <div class="col-sm-4">Graph Extra 3</div>
    </div>
</div>
</body>

Upvotes: 0

Rafael Herscovici
Rafael Herscovici

Reputation: 17134

Something like this?

[class^='col-sm'] {
  border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-5">
        BOX GRAPH
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-12">
                BOX 1
              </div>
              <div class="col-sm-12">
                BOX 2
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-12">
                BOX 1
              </div>
              <div class="col-sm-12">
                BOX 2
              </div>
              <div class="col-sm-12">
                BOX 3
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-1">
        LIKE BOX
      </div>
      <!-- will be empty -->
    </div>
    <div class="row">
      <div class="col-sm-4">Graph Extra 1</div>
      <div class="col-sm-4">Graph Extra 2</div>
      <div class="col-sm-4">Graph Extra 3</div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions