Bootstrap Snippet Free Ship View Section 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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css">
<div class="main-slider-bar hidden-xs">
<div class="container-fluid">
<div class=" row">
<div class="col-md-3 col-xs-12 border-r">
  <div class="main-slider-info">
<div class="main-slider-info-cell">
<div class="cell-icon">
<i class="fa fa-truck"></i>
</div>
<div class="cell-content">
<span class="cell-caption">
FREE SHIPPING </span> <span class="cell-subcaption">
On all orders over 90$ </span>
</div>
</div>
  </div>
</div>
<div class="col-md-3 col-xs-12 border-r">
  <div class="main-slider-info">
<div class="main-slider-info-cell">
<div class="cell-icon">
<i class="fa fa-shield"></i>
</div>
<div class="cell-content">
<span class="cell-caption">
SECURE SHOPPING </span> <span class="cell-subcaption">
From Online Full Secure shoping </span>
</div>
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
.main-slider-bar {
    background: #F66249;
    color: #FFF; }
     .main-slider-bar span, .main-slider .main-slider-bar a, .main-slider .main-slider-bar i, .main-slider .main-slider-bar p, .main-slider .main-slider-bar h1, .main-slider .main-slider-bar h2, .main-slider .main-slider-bar h3, .main-slider .main-slider-bar h4, .main-slider .main-slider-bar h5, .main-slider .main-slider-bar h6 {
      color: #FFF; }
   .main-slider-bar .main-slider-info {
      display: inline-block;
      padding: 14px 0 14px;
      margin-top: 5px;
      width: 100%; }
       .main-slider-bar .main-slider-info  {
        display: inline-block; }
      
          
           .main-slider-bar .border-r .main-slider-info {
            border-right: 1px solid rgba(255, 255, 255, 0.3); } 
            .main-slider-bar .border-r:last-of-type .main-slider-info {
            border-right: 1px solid rgba(255, 255, 255, 0); } 
         .main-slider-bar .main-slider-info  .cell-icon  {
          font-size: 50px;
          display: inline-block;
          position: relative;
          line-height: 40px;
          float: left; }
         .main-slider-bar .main-slider-info  .cell-icon .dashicons {
            width: initial;
            height: initial;
            font-size: 30px;
            vertical-align: middle; }
        .main-slider-bar .main-slider-info  .cell-content {
          float: left;
          margin-left: 15px; }
        .main-slider-bar .main-slider-info  .cell-caption {
          font-size: 18px;
          line-height: 18px;
          font-weight: 700;
          display: block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Free Ship View Section "
Bootstrap 4.1.1 Snippet by yatendra00013

Related: See More

Questions / Comments:

"Free Ship View Section " Bootstrap 4.1.1 Snippet by yatendra00013

Related: See More

Questions / Comments:

"Free Ship View Section "
Bootstrap 4.1.1 Snippet by yatendra00013