Bootstrap Snippet product page 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 ---------->
<section class="profil  py-5 ">
   <div class="container">
     <div class="row">
         <div class="col-md-8">
              <div class="slider">
                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                      <ol class="carousel-indicators">
                          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                      </ol>
                      <div style="    border-radius: 0.25rem;" class="carousel-inner">
                          <div class="carousel-item active">
                              <img class="d-block w-100" style="height: 290px" src="http://i2.haber7.net//haber/haber7/photos/2017/42/yerli_elektrikli_otobus_sileo_gorucuye_cikti_1508579280_0003.jpg" alt="First slide">
                          </div>
                          <div class="carousel-item">
                              <img class="d-block w-100" style="height: 290px" src="https://plusfly.com/wp-content/uploads/2017/08/kamilkoc-otobus-bileti.jpg" alt="Second slide">
                          </div>
                          <div class="carousel-item">
                              <img class="d-block w-100" style="height: 290px" src="https://www.biletbayi.com/Content/ContentItemDocument/images/manload/pamukkale-otobus.jpg" alt="Third slide">
                          </div>
                      </div>
                      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                      </a>
                      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                      </a>
                  </div>
              </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
.profil{
  background: #f9f9f9;
}
.profil .yacht-info__list li {
    width:25%;
}
.olanaklar-kutu{
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  overflow: hidden;
  float: left;
  width: 100%;
  margin: 15px 0px;
}
.olanaklar{
  float: left;
  width: 100%;
  position: relative;
  padding: 25px 30px 30px;
}
.margin-top--22{
  margin-top:-22px;
}
.olanaklar-kutu h4{
  color: #FF9800;
}
.yacht-info__list img{
    width:20px;
    padding-right:5px;
}
.yacht-info__list {
    list-style: none;
    padding: 0;
    font-size: 16px;
}
.yacht-info__list li {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"product page"
Bootstrap 4.1.1 Snippet by ali27001

Related: See More

Questions / Comments:

"product page" Bootstrap 4.1.1 Snippet by ali27001

Related: See More

Questions / Comments:

"product page"
Bootstrap 4.1.1 Snippet by ali27001