Bootstrap Snippet Bootstrap 4 Blog Carousel using HTML CSS Bootstrap

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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 ---------->
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->
<style>
    body {
        background-color: #ddffdd;
        }
    h5 {
        color: black;
        font-size:200%;
        }
    </style>
<section class="pricing py-5">
  <div class="container">
    <div class="row">
      <!-- 1 Tier -->
      <div class="col-lg-4">
        <div class="card mb-5 mb-lg-0">
          <div class="card-body" style=background-color:#aa99ff>
            <h5 align="center"> SIE Study Course</h5>
            <h6 class="card-price text-center">$149<span class="period"> for 12 weeks of access</span></h6>
            <hr>
            <ul class="fa-ul">
              <li><span class="fa-li"><i class="fas fa-check"></i></span>Starting Wednesday, August 7th</li>
              <li><span class="fa-li"><i class="fas fa-check"></i></span>6, 3-hour classes</li>
              <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li>
              <li><span class="fa-li"><i class="fas fa-check"></i></span>All of the material needed for success on the SIE, spread out to give time for processing and understanding.</li>
            </ul>
            <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
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
.cta-100 {
  margin-top: 100px;
  padding-left: 8%;
  padding-top: 7%;
}
.col-md-4{
    padding-bottom:20px;
}
.white {
  color: #fff !important;
}
.mt{float: left;margin-top: -20px;padding-top: 20px;}
.bg-blue-ui {
  background-color: #708198 !important;
}
figure img{width:300px;}
#blogCarousel {
  padding-bottom: 100px;
}
.blog .carousel-indicators {
  left: 0;
  top: -50px;
  height: 50%;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
  background: #708198;
  border-radius: 50%;
  width: 8px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Blog Carousel"
Bootstrap 4.1.1 Snippet by briankolins

Related: See More

Questions / Comments:

"Bootstrap 4 Blog Carousel" Bootstrap 4.1.1 Snippet by briankolins

Related: See More

Questions / Comments:

"Bootstrap 4 Blog Carousel"
Bootstrap 4.1.1 Snippet by briankolins