title: How can I modify card-colmns of bootstrap?
body: <p>I am using <code>card-columns</code> class from Bootstrap 4 to design a page for my portfolio. Everything is fine but I want a change in the look so that it looks some more attractive.</p>
  
  <p><a href="https://i.stack.imgur.com/pJTxS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pJTxS.jpg" alt=""></a></p>
  
  <p>This is the design I have made. I want the <strong>Other Projects</strong> (same width as of <strong>Latest Projects</strong>) card to stay below <strong>Latest Projects</strong> so that the card below <strong>Other Projects</strong> (as per the current picture) stay on top of that column then <strong>Skills</strong>.</p>
  
  <pre><code>&lt;div class="card-columns"&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;About Me&lt;/h3&gt;
              &lt;hr&gt;
              &lt;div class="card-text"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;b&gt;Languages:&lt;/b&gt; Python, JAVA, C&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Frameworks:&lt;/b&gt; Bootstrap (Frontend), Flask, Django, OpenCV&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Database:&lt;/b&gt; MySQL, MS SQL Server&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Tools:&lt;/b&gt; MySQL Workbench, Git&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Editors Used:&lt;/b&gt; Visual Studio Code, Sublime Text, Vim&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Operating Systems:&lt;/b&gt; Linux (Ubuntu), Windows&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Total Experience: &lt;/b&gt;Freshers&lt;/li&gt;
                      &lt;li&gt;&lt;b&gt;Current Employer: &lt;/b&gt;Student&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card p-3"&gt;
          &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;Latest Projects&lt;/h3&gt;
              &lt;hr&gt;
              &lt;div class="card-text"&gt;
                  &lt;h5 class="text-center"&gt;BT Real Estate&lt;/h5&gt;
                  &lt;img src="{{url_for('static', filename='pic/btre.png')}}" alt="BTRE" class="btre"&gt;
                  &lt;label style="font-size: 10pt;"&gt;
                      &lt;b&gt;Technology Used: &lt;/b&gt;HTM/CSS/JS(Frontend), Python-Django(Backend), Postgres SQL(Database)
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="row no-gutters"&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;img src="{{url_for('static', filename='pic/rms.png')}}" class="card-img" alt="rms" height="150" style="margin-top: 30px;"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-8"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 style="font-size: 1.2rem;"&gt;Reminder Management System&lt;/h5&gt;
                          &lt;label style="font-size: 12pt;"&gt;&lt;b&gt;Technology Used: &lt;/b&gt;&lt;/label&gt;
                          &lt;label&gt;HTML/CSS/JS(Frontend), Python-Flask(Backend), Postgres SQL(Database)&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card p-3"&gt;
          &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;Other Projects&lt;/h3&gt;
              &lt;hr&gt;
              &lt;div class="card-text"&gt;
                  &lt;h5&gt;Stock Management System&lt;/h5&gt;
                  &lt;p&gt;Manages stock of a company and it's distributor &amp; outlet. Distributor can buy product from Company and Outlet can buy from Distributor.&lt;/p&gt;
                  &lt;label&gt;&lt;b&gt;Technology Used: &lt;/b&gt;&lt;/label&gt;
                  &lt;label&gt;HTML/CSS/JS(Frontend), Python-Flask(Backend), Postgres SQL(Database)&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card" style="max-width: 25rem;"&gt;
          &lt;div class="card-body"&gt;
              &lt;div class="card-text"&gt;
                  &lt;ul&gt;
                      &lt;li class="contact"&gt;&lt;i class="fas fa-map-marker-alt"&gt;&lt;/i&gt;Kolkata, West Bengal, India&lt;/li&gt;
                      &lt;li class="contact"&gt;&lt;i class="far fa-envelope"&gt;&lt;/i&gt;avishek.arunavo1997@gmail.com&lt;/li&gt;
                      &lt;li class="contact"&gt;&lt;i class="far fa-file-alt"&gt;&lt;/i&gt;Download Resume&lt;/li&gt;
                      &lt;li class="contact"&gt;&lt;i class="far fa-comments"&gt;&lt;/i&gt;Contact Me&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>This is the template
  
  .card-columns
  {
      column-count: 2 !important;
      position: relative;
      top: 10%;
      transform: translateY(10%);
      -moz-transform: translateY(10%);
  }
  </code></pre>
  
  <p>This is the <code>card-columns</code> css which I had edited for making 2 columns.</p>
  
  <p>It will be great if you can help me out.</p>