Bootstrap Snippet Price Tab Table using HTML CSS Bootstrap Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container plans">
    
    <div class="row">
        <div class="col-md-10 offset-md-1 text-center py-2">
            <h2>Meet our plans</h2>
        </div>
    </div>
    
    <div class="row justify-content-center py-2">
        <ul class="nav justify-content-center">
            <li class="nav-item px-3">
                <button class="btn-menu btn-primary btn-lg btn-block active" role="button" onclick="costoMensual()" id="btn-status1">Monthly</button>
            </li>
            <li class="nav-item px-3">
                <button class="btn-menu btn-primary btn-lg btn-block" role="button" onclick="costoTrimestral()" id="btn-status2">Quarterly</button>
            </li>
            <li class="nav-item px-3">
                <button class="btn-menu btn-primary btn-lg btn-block" role="button" onclick="costoSemestral()" id="btn-status3">Biannual</button>
            </li>
            <li class="nav-item px-3">
                <button class="btn-menu btn-primary btn-lg btn-block" role="button" onclick="costoAnual()" id="btn-status4">Annual</button>
            </li>
        </ul>
    </div>
    
    <div class="row justify-content-center py-4">
        
        <div class="col-lg-4">
            <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">Start Up</h5>
                    <h6 class="card-price text-center" id="costo1">$6,500</h6>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.plans .card {
  border: none;
  border-radius: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.plans hr {
  margin: 1.5rem 0;
}
.plans .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}
.plans .card-price {
  font-size: 3rem;
  margin: 0;
}
.plans .card-price .period {
  font-size: 0.8rem;
}
.plans ul li {
  margin-bottom: 1rem;
}
.plans .text-muted {
  opacity: 0.7;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
function costoMensual(){
  document.getElementById("costo1").innerHTML = "$6,500";
  document.getElementById("costo2").innerHTML = "$8,500";
  var element = document.getElementById("btn-status1");
  element.classList.add("active");
  //demas botones
  var element1 = document.getElementById("btn-status2");
  element1.classList.remove("active");
  var element2 = document.getElementById("btn-status3");
  element2.classList.remove("active");
  var element3 = document.getElementById("btn-status4");
  element3.classList.remove("active");
}
function costoTrimestral(){
  document.getElementById("costo1").innerHTML = "$17,550";
  document.getElementById("costo2").innerHTML = "$22,950";
  var element = document.getElementById("btn-status2");
  element.classList.add("active");
  //demas botones
  var element1 = document.getElementById("btn-status1");
  element1.classList.remove("active");
  var element2 = document.getElementById("btn-status3");
  element2.classList.remove("active");
  var element3 = document.getElementById("btn-status4");
  element3.classList.remove("active");
}
function costoSemestral(){
  document.getElementById("costo1").innerHTML = "$33,150";
  document.getElementById("costo2").innerHTML = "$43,350";
  var element = document.getElementById("btn-status3");
  element.classList.add("active");
  //demas botones
  var element1 = document.getElementById("btn-status1");
  element1.classList.remove("active");
  var element2 = document.getElementById("btn-status2");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Price Tab Table"
Bootstrap 4.1.1 Snippet by luismmmoralesg

Related: See More

Questions / Comments:

"Price Tab Table" Bootstrap 4.1.1 Snippet by luismmmoralesg

Related: See More

Questions / Comments:

"Price Tab Table"
Bootstrap 4.1.1 Snippet by luismmmoralesg