You can configure your pricing table using the grid system in order to make it responsive for small devices.
Using the "Most Popular" css class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
<div class="row"> <div class="pricing-table"> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Enterprise<span>$59</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>10GB</strong> Disk Space</li> <li><strong>100GB</strong> Monthly Bandwidth</li> <li><strong>20</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-3 col-sm-6 center"> <div class="plan most-popular"> <div class="plan-ribbon-wrapper"> <div class="plan-ribbon">Popular</div> </div> <h3>Professional<span>$29</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>5GB</strong> Disk Space</li> <li><strong>50GB</strong> Monthly Bandwidth</li> <li><strong>10</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Standard<span>$17</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>3GB</strong> Disk Space</li> <li><strong>25GB</strong> Monthly Bandwidth</li> <li><strong>5</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Basic<span>$9</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>1GB</strong> Disk Space</li> <li><strong>10GB</strong> Monthly Bandwidth</li> <li><strong>2</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<div class="row"> <div class="pricing-table"> <div class="col-md-4"> <div class="plan"> <h3>Enterprise<span>$59</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>10GB</strong> Disk Space</li> <li><strong>100GB</strong> Monthly Bandwidth</li> <li><strong>20</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-4"> <div class="plan"> <h3>Professional<span>$29</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>5GB</strong> Disk Space</li> <li><strong>50GB</strong> Monthly Bandwidth</li> <li><strong>10</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> <div class="col-md-4"> <div class="plan"> <h3>Standard<span>$17</span></h3> <a class="btn btn-lg btn-primary" href="#">Sign up</a> <ul> <li><strong>3GB</strong> Disk Space</li> <li><strong>25GB</strong> Monthly Bandwidth</li> <li><strong>5</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> </ul> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<div class="pricing-table princig-table-flat"> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Enterprise<span>$59</span></h3> <ul> <li><strong>10GB</strong> Disk Space</li> <li><strong>100GB</strong> Monthly Bandwidth</li> <li><strong>20</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-default" href="#">Sign up</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6 center"> <div class="plan most-popular"> <h3>Professional<em class="desc">Most Popular</em><span>$29</span></h3> <ul> <li><strong>5GB</strong> Disk Space</li> <li><strong>50GB</strong> Monthly Bandwidth</li> <li><strong>10</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-primary" href="#">Get Started Now!</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Standard<span>$17</span></h3> <ul> <li><strong>3GB</strong> Disk Space</li> <li><strong>25GB</strong> Monthly Bandwidth</li> <li><strong>5</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-default" href="#">Sign up</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Basic<span>$9</span></h3> <ul> <li><strong>1GB</strong> Disk Space</li> <li><strong>10GB</strong> Monthly Bandwidth</li> <li><strong>2</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-default" href="#">Sign up</a></li> </ul> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
<div class="row"> <div class="pricing-table pricing-table-sm"> <div class="col-md-2"> <div class="plan"> <h3> Basic <em class="desc"><strong>3GB</strong> Disk Space</em> <span>$19</span> </h3> <a class="btn btn-primary" href="#">Sign up</a> </div> </div> <div class="col-md-2 center"> <div class="plan"> <h3> Advanced <em class="desc"><strong>5GB</strong> Disk Space</em> <span>$29</span> </h3> <a class="btn btn-primary" href="#">Sign up</a> </div> </div> <div class="col-md-2"> <div class="plan most-popular"> <div class="plan-ribbon-wrapper"> <div class="plan-ribbon">Popular</div> </div> <h3> Professional <em class="desc"><strong>15GB</strong> Disk Space</em> <span>$39</span> </h3> <a class="btn btn-primary" href="#">Sign up</a> </div> </div> <div class="col-md-2"> <div class="plan"> <h3> Enterprise <em class="desc"><strong>100GB</strong> Disk Space</em> <span>$49</span> </h3> <a class="btn btn-primary" href="#">Sign up</a> </div> </div> <div class="col-md-2"> <div class="plan"> <h3> Business <em class="desc"><strong>15GB</strong> Disk Space</em> <span>$59</span> </h3> <a class="btn btn-primary" href="#">Sign up</a> </div> </div> <div class="col-md-2"> <div class="plan"> <h3> Custom <em class="desc"><strong>100GB</strong> Disk Space</em> <span>$159</span> </h3> <a class="btn btn-primary" href="#">Sign up</a> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
<section class="parallax section section-text-light section-parallax mt-none mb-none" data-stellar-background-ratio="0.5" style="background-image: url('/portals/2/img/parallax-image.jpg');"> <div class="container"> <div class="row"> <div class="pricing-table princig-table-flat spaced no-borders"> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Enterprise<span>$59</span></h3> <ul> <li><strong>10GB</strong> Disk Space</li> <li><strong>100GB</strong> Monthly Bandwidth</li> <li><strong>20</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-default" href="#">Sign up</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6 center"> <div class="plan most-popular"> <h3>Professional<em class="desc">Most Popular</em><span>$29</span></h3> <ul> <li><strong>5GB</strong> Disk Space</li> <li><strong>50GB</strong> Monthly Bandwidth</li> <li><strong>10</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-primary" href="#">Get Started Now!</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Standard<span>$17</span></h3> <ul> <li><strong>3GB</strong> Disk Space</li> <li><strong>25GB</strong> Monthly Bandwidth</li> <li><strong>5</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-default" href="#">Sign up</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="plan"> <h3>Basic<span>$9</span></h3> <ul> <li><strong>1GB</strong> Disk Space</li> <li><strong>10GB</strong> Monthly Bandwidth</li> <li><strong>2</strong> Email Accounts</li> <li><strong>Unlimited</strong> subdomains</li> <li><a class="btn btn-default" href="#">Sign up</a></li> </ul> </div> </div> </div> </div> </div> </section>