title: How to put 4 sets of two charts side by side on HTML?
body: <p>I'm a newbie in HTML.
  I'm currently trying to put 4 sets of two graphs side by side on a webpage.
  So each set would have a graph above and below.
  My code is as the following:</p>
  <pre><code>&lt;template&gt;
  &lt;div class = &quot;container&quot;&gt;
    &lt;div class=&quot;col-xl-3 col-lg-12&quot;&gt;
      &lt;div class =&quot;row&quot;&gt;
              &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref=&quot;prpsch1&quot; id=&quot;prpsch1&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      &lt;div class =&quot;row&quot;&gt;
            &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref = &quot;prpdch1&quot; id=&quot;prpdch1&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;&gt;
          &lt;/div&gt;
    &lt;div class=&quot;col-xl-3 col-lg-12&quot;&gt;
      &lt;div class =&quot;row&quot;&gt;
              &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref=&quot;prpsch2&quot; id=&quot;prpsch2&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      &lt;div class =&quot;row&quot;&gt;
            &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref = &quot;prpdch2&quot; id=&quot;prpdch2&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;&gt;
          &lt;/div&gt;
    &lt;div class=&quot;col-xl-3 col-lg-12&quot;&gt;
      &lt;div class =&quot;row&quot;&gt;
              &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref=&quot;prpsch3&quot; id=&quot;prpsch3&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      &lt;div class =&quot;row&quot;&gt;
            &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref = &quot;prpdch3&quot; id=&quot;prpdch3&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;&gt;
          &lt;/div&gt;
    &lt;div class=&quot;col-xl-3 col-lg-12&quot;&gt;
      &lt;div class =&quot;row&quot;&gt;
              &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref=&quot;prpsch4&quot; id=&quot;prpsch4&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      &lt;div class =&quot;row&quot;&gt;
            &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;card-title&quot;&gt;Graph&lt;/h4&gt;
                  &lt;a class=&quot;heading-elements-toggle&quot;&gt;&lt;i class=&quot;fa fa-ellipsis-v font-medium-3&quot;&gt;&lt;/i&gt;&lt;/a&gt;                
                &lt;/div&gt;
                &lt;div class=&quot;card-content&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div ref = &quot;prpdch4&quot; id=&quot;prpdch4&quot; class=&quot;height-300&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>However, webpage just every charts from top to bottom. And those charts are not even whole.</p>
  <p><a href="https://i.stack.imgur.com/LvBDI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LvBDI.png" alt="enter image description here" /></a></p>
  <p>I want to put the 8 charts in 2 rows and 4 columns in the blank portion of the page.</p>
  <p>How can I do it?</p>
  <p>Thanks a lot in advance!</p>