title: Bootstrap 4 Cards - How to set 2 cards in the row
body: <p>How can i make 2 cards to seem next to eachother, in same row while the view is horizontal?</p>
  <p>My code:</p>
  <pre><code>h2 { 
  display: block;
  font-size: 2.50em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  }
  *{
  box-sizing: border-box; 
  }
  card-deck{           /*Assuming this class as parent of all your cards*/
  column-count: 2;
  column-gap: 2.5rem;  /*According to need*/
  }
  
  card{
  width: 45%;       /*According to need , such that no vertical scroll apear*/
  height: 30%;      /*According to need*/
  padding: 20px;   /*According to need*/
  }
  
  
  &lt;/style&gt;
     &lt;?php include '728x90.php'; ?&gt;
  &lt;div class=&quot;text-center py-6&quot;&gt;&lt;h3 class=&quot;mb-1&quot;&gt;Offerwalls&lt;/h3&gt; &lt;p class=&quot;text-base leading-none&quot;&gt;Earn a huge amount of Coins by completing many different types of tasks, watching video, playing games and others.&lt;/p&gt;&lt;/div&gt;
  &lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
             &lt;center&gt;There is 10% Bonus For Cpx Research!
           &lt;/div&gt;
        &lt;?php if ($settings['cpx_status'] == 'on') { ?&gt;
  &lt;div align=&quot;center&quot; class=&quot;justify-content-center&quot;&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
  &lt;div class=&quot;card-deck&quot;&gt;
  &lt;div class=&quot;card&quot; style=&quot;width:330px&quot;&gt;
  &lt;center&gt;&lt;h2 style=&quot;color:LightBlue;&quot;&gt;CPX&lt;/h2&gt;
  &lt;div class=&quot;card-body&quot;&gt;
  &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;&gt;BONUS&lt;/span&gt;
                         &lt;span class=&quot;badge badge-light-warning badge-pill ml-auto mr-1&quot;&gt;Featured&lt;/span&gt;                 
                         &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;    data-toggle=&quot;popover&quot; data-content=&quot;Complete Surveys To Earn High Amount Of Coins&quot; data-trigger=&quot;hover&quot; data-original-title=&quot;Surveys&quot; data-placement=&quot;bottom&quot;&gt;Surveys&lt;/span&gt;
                         &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;    data-toggle=&quot;popover&quot; data-content=&quot;Earn High Amount Of Coins&quot; data-trigger=&quot;hover&quot; data-original-title=&quot;Reward&quot; data-placement=&quot;bottom&quot;&gt;High Reward&lt;/span&gt;&lt;br&gt;&lt;br&gt;
                          &lt;div class=&quot;row border-top text-center mx-0&quot;&gt;&lt;/div&gt;&lt;br&gt;
  &lt;center&gt;
  &lt;a class=&quot;btn btn-primary&quot; href=&lt;?= base_url() ?&gt;&gt;View&lt;/a&gt;&lt;/center&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
     &lt;?php } ?&gt;
     &lt;?php if ($settings['wannads_status'] == 'on') { ?&gt;
  &lt;div align=&quot;center&quot; class=&quot;justify-content-center&quot;&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
  &lt;div class=&quot;card-deck&quot;&gt;
  &lt;div class=&quot;card&quot; style=&quot;width:330px&quot;&gt;
  &lt;center&gt;&lt;h2 style=&quot;color:Orange;&quot;&gt;Wannads&lt;/h2&gt;
  &lt;div class=&quot;card-body&quot;&gt;
  
                         &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;    data-toggle=&quot;popover&quot; data-content=&quot;Complete Surveys To Earn High Amount Of Coins&quot; data-trigger=&quot;hover&quot; data-original-title=&quot;Surveys&quot; data-placement=&quot;bottom&quot;&gt;Surveys&lt;/span&gt;
                         &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;    data-toggle=&quot;popover&quot; data-content=&quot;Earn High Amount Of Coins&quot; data-trigger=&quot;hover&quot; data-original-title=&quot;Reward&quot; data-placement=&quot;bottom&quot;&gt;Apps&lt;/span&gt;&lt;br&gt;&lt;br&gt;
                          &lt;div class=&quot;row border-top text-center mx-0&quot;&gt;&lt;/div&gt;&lt;br&gt;
  &lt;center&gt;
  &lt;a class=&quot;btn btn-primary&quot; href=&lt;?= base_url() ?&gt;&gt;View&lt;/a&gt;&lt;/center&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
     &lt;?php } ?&gt;
           &lt;?php if ($settings['wannads_status'] == 'on') { ?&gt;
  &lt;div align=&quot;center&quot; class=&quot;justify-content-center&quot;&gt;
  
  &lt;div class=&quot;col-md-6&quot;&gt;
  &lt;div class=&quot;card-deck&quot;&gt;
  &lt;div class=&quot;card&quot; style=&quot;width:330px&quot;&gt;
  &lt;center&gt;&lt;h2 style=&quot;color:Orange;&quot;&gt;Wannads&lt;/h2&gt;
  &lt;div class=&quot;card-body&quot;&gt;
  
                         &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;    data-toggle=&quot;popover&quot; data-content=&quot;Complete Surveys To Earn High Amount Of Coins&quot; data-trigger=&quot;hover&quot; data-original-title=&quot;Surveys&quot; data-placement=&quot;bottom&quot;&gt;Surveys&lt;/span&gt;
                         &lt;span class=&quot;badge badge-light-primary badge-pill ml-auto mr-1&quot;    data-toggle=&quot;popover&quot; data-content=&quot;Earn High Amount Of Coins&quot; data-trigger=&quot;hover&quot; data-original-title=&quot;Reward&quot; data-placement=&quot;bottom&quot;&gt;Apps&lt;/span&gt;&lt;br&gt;&lt;br&gt;
                          &lt;div class=&quot;row border-top text-center mx-0&quot;&gt;&lt;/div&gt;&lt;br&gt;
  &lt;center&gt;
  &lt;a class=&quot;btn btn-primary&quot; href=&lt;?= base_url() ?&gt;&gt;View&lt;/a&gt;&lt;/center&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
     &lt;?php } ?&gt;
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/qSsa3.jpg" rel="nofollow noreferrer">You can see how it looks like in my codes.</a>
  But as i said I want them to be in same row for every 2 cards</p>
  <p>i realy realy.. need help i tryed several codes but i can’t do it im using bootsrap and try to divide cards like 2-2</p>