Hosting Plan Layout with Bootstrap

CODING TUTORIALSHTML & CSS

Hosting Plan Layout
Hosting Plan Layout

Hosting Plan Layout with Bootstrap

In this tutorial you will learn how to create a Hosting Plan Layout with Bootstrap with these easy step. If you don’t have Bootstrap yet, you can download Bootstrap v4.0.0-alpha.6 from the given link below.

DOWNLOAD HEREBootstrap v4.0.0-alpha.6

The following code below can create custom Hosting Plan Layout you can easily copy and paste.

In this case I used bootstrap panel on every tile, you can add and change the style as you like.

HTML File : hostingplan.html
 <title>Pricetable</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" id="bootstrap-css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet">
     <div class="container">
        <h2 class="text-center">
Pricing Table</h2>
<div class="row">
            <div class="col-md-3 hosting-col">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="text-center host-heading">
Hosting </h2>
<h2 class="text-center host-heading">
Plans </h2>
</div>
<div class="panel-body">
                        <ul class="list-group hostingplans">
<li class="list-group-item"><span>Data Storage</span></li>
<li class="list-group-item"><span>Monthly Traffic</span></li>
<li class="list-group-item"><span>Email Accounts</span></li>
<li class="list-group-item"><span>MYSQL Database</span></li>
<li class="list-group-item"><span>Free Domain</span></li>
<li class="list-group-item"><span>Web Statistics</span></li>
<li class="list-group-item"><span>Online Support</span></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
                <div class="panel panel-info">
                    <div class="panel-heading economy">
                        <h3 class="text-center host-label">
Economy </h3>
<h2 class="text-center">
$1 <span class="per-month">/month </span></h2>
</div>
<div class="panel-body">
                        <ul class="list-group">
<li class="list-group-item"><span>2 GB Disk Space</span></li>
<li class="list-group-item"><span>10 GB Bandwidth</span></li>
<li class="list-group-item"><span>5 Accounts</span></li>
<li class="list-group-item"><span>2 Database</span></li>
<li class="list-group-item"><i class="fa fa-check"></i></li>
<li class="list-group-item"><i class="fa fa-close"></i></li>
<li class="list-group-item"><i class="fa fa-close"></i></li>
</ul>
</div>
<div class="panel-footer">
                        <button class="btn btn-primary addto-cart" type="button">Add to Cart</button>
                    </div>
</div>
</div>
<div class="col-md-3">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="text-center host-label">
Deluxe </h3>
<h2 class="text-center">
$2 <span class="per-month">/month </span></h2>
</div>
<div class="panel-body">
                        <ul class="list-group">
<li class="list-group-item"><span>10 GB Disk Space</span></li>
<li class="list-group-item"><span>50 GB Bandwidth</span></li>
<li class="list-group-item"><span>10 Accounts</span></li>
<li class="list-group-item"><span>5 Database</span></li>
<li class="list-group-item"><i class="fa fa-check"></i></li>
<li class="list-group-item"><i class="fa fa-check"></i></li>
<li class="list-group-item"><i class="fa fa-close"></i></li>
</ul>
</div>
<div class="panel-footer">
                        <button class="btn btn-primary addto-cart" type="button">Add to Cart</button>
                    </div>
</div>
</div>
<div class="col-md-3">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="text-center host-label">
Ultimate </h3>
<h2 class="text-center">
$5 <span class="per-month">/month </span></h2>
</div>
<div class="panel-body">
                        <ul class="list-group">
<li class="list-group-item"><span>50 GB Disk Space</span></li>
<li class="list-group-item"><span>100 GB Bandwidth</span></li>
<li class="list-group-item"><span>Unlimited </span></li>
<li class="list-group-item"><span>Unlimited </span></li>
<li class="list-group-item"><i class="fa fa-check"></i></li>
<li class="list-group-item"><i class="fa fa-check"></i></li>
<li class="list-group-item"><i class="fa fa-check"></i></li>
</ul>
</div>
<div class="panel-footer">
                        <button class="btn btn-primary addto-cart" type="button">Add to Cart</button>
                    </div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

Include these links inside your HTML ‘head’.
HTML File: style.css

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" id="bootstrap-css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet">

You can add custom css and background color for every category or panel to make it looks better .
CSS File: style.css

<style>
h3.text-center.host-label{
   margin-top:0px;
   border-bottom:1px solid #6fb6f5!important;
 }
 
span.per-month{
 
  font-size:15px;
 
  margin-left:-5px;
 
}
 
button.btn.addto-cart{
 
  width:100%;
 
  font-size:16px;
 
  font-family:Boing-Bold,"Arial Black",sans-serif;
 
  background-color:#fff;
 
}
 
ul.list-group{
 
  border:none;
 
  text-align:center;
 
  margin-bottom:0;
 
}
 
li.list-group-item{
 
  border:none;
 
}
 
i.fa.fa-check{
 
  font-size:21px;
 
  color:#118e1e;
 
}
 
i.fa.fa-close{
 
  font-size:21px;
 
  color:#c81b1b;
 
}
 
ul.list-group.hostingplans{
 
  text-align:left;
 
}
 
h2.text-center.host-heading{
 
  color:#fe7614;
 
}
 
div.row{
 
  width:90%;
 
  margin:auto;
 
}
 
div.col-md-3.hosting-col{
 
  width:25%;
 
  margin-right:-21px;
 
}
 
h2.text-center.host-heading{
 
  margin-top:5px;
 
}
 
</style>
Comment down below if you have some questions 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *