iklan bagian Header

Membuat Grid Toko Online Dengan Bootstrap 4

Panduan membuat grid toko online dengan bootstrap 4 php dan custom css. Grid toko online atau layout kontent online shop yang keren hanya dengan bootstrap 4.

Membuat Grid Toko Online Dengan Bootstrap 4

Hai teman-teman, Dalam posting ini saya memberikan Anda desain kotak toko online, gird shop, box real estate dan lain-lain. Kamu bisa menggunakan desain ini untuk menampilkan produk atau barang yang ingin dijual.

Desain grid shop ini sangat bagus karena di dalamnya sudah memuat gambar produk, label harga, keterangan produk, rating produk dan ada dua tombol yang bisa kamu kutom sesuai toko online yang ingin kamu bangun. Layout ini bisa kamu kombinasikan dengan toko online atau project kamu.

Desain ini dibuat menggunakan fitur column atau kolom pada bootstrap 4 dan tentungan box-box ini sudah pasti responsive. Kalau pada bootstrap 4 namanya mungkin sudah sedikit berubah karena bentuk nya sudah seperti card atau kartu bukan seperti thumbnail lagi.

Bagi kalian yang sedang mencari referensi box online shop atau gird shop bisa ikuti panduan dibawah ini untuk membuatnya:

Cara Membuat Gird Shop dengan Bootstrap

1. Silahkan buka aplikasi text editor favorit anda seperti sublime atau notepad++.
2. Jika sudah,  buat sebuah file baru > beri nama index.html > paste kan kode dibawah ini > save.

<!DOCTYPE html>
<html>
<head>
  <title>Toko Online Design</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container main-section">
  <div class="row">
    <div class="col-lg-4">
      <div class="section border bg-white rounded p-2">
        <div class="row">
          <div class="col-lg-12 img-section">
            <img src="jaket2.jpg" class="p-0 m-0 res-ponsive"> <!--Ganti Gambar Sendiri/ Script PHP Produk-->
            <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span>
          </div>
          <div class="col-lg-12 sectin-title">
            <h1 class="pt-2">Jaket Boomber</h1>
          </div>
          <div class="col-lg-12">
            <div class="row">
              <div class="col-lg-2">
                <span class="badge badge-success p-2">Rp 300.000</span>
              </div>
              <div class="col-lg-10 text-right">
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star-half-alt"></i></span><br>
              </div>
            </div>
            <hr>
          </div>
          <div class="col-lg-12 section-detail">
            <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor.</p><hr>
          </div>
          <div class="col-lg-12 pb-2">
            <div class="row">
              <div class="col-lg-6">
                <a href="#" class="btn btn-danger btn-block btn-sm">Beli</a>
              </div>
              <div class="col-lg-6">
                <a href="#" class="btn btn-info btn-block btn-sm">Masuk Keranjang</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="section border bg-white rounded p-2">
        <div class="row">
          <div class="col-lg-12 img-section">
            <img src="jaket2.jpg">
            <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span>
          </div>
          <div class="col-lg-12 sectin-title">
            <h1 class="pt-2">Jaket Boomber 1</h1>
          </div>
          <div class="col-lg-12">
            <div class="row">
              <div class="col-lg-2">
                <span class="badge badge-success p-2">Rp 400.000</span>
              </div>
              <div class="col-lg-10 text-right">
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star-half-alt"></i></span><br>
              </div>
            </div>
            <hr>
          </div>
          <div class="col-lg-12 section-detail">
            <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor.</p><hr>
          </div>
          <div class="col-lg-12 pb-2">
            <div class="row">
              <div class="col-lg-6">
                <a href="#" class="btn btn-danger btn-block btn-sm">Beli</a>
              </div>
              <div class="col-lg-6">
                <a href="#" class="btn btn-info btn-block btn-sm">Masuk Keranjang</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="section border bg-white rounded p-2">
        <div class="row">
          <div class="col-lg-12 img-section">
            <img src="jaket2.jpg" >
            <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span>
          </div>
          <div class="col-lg-12 sectin-title">
            <h1 class="pt-2">Jaket Gunung</h1>
          </div>
          <div class="col-lg-12">
            <div class="row">
              <div class="col-lg-2">
                <span class="badge badge-success p-2">Rp 300.400</span>
              </div>
              <div class="col-lg-10 text-right">
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star-half-alt"></i></span><br>
              </div>
            </div>
            <hr>
          </div>
          <div class="col-lg-12 section-detail">
            <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor.</p><hr>
          </div>
          <div class="col-lg-12 pb-2">
            <div class="row">
              <div class="col-lg-6">
                <a href="#" class="btn btn-danger btn-block btn-sm">Beli</a>
              </div>
              <div class="col-lg-6">
                <a href="#" class="btn btn-info btn-block btn-sm">Masuk Keranjang</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
3. Kemudian buat file baru lagi, new file > berinama custom.css > pastekan kode dibawah ini > save.
body{
    background-color: #f5f5f5;
    font-family: 'Roboto Condensed', sans-serif;
}
.main-section{
    margin-top:20px;
}
.add-sens{
    position: absolute;
    top:0px;
    right:50px;
}
.img-section{
    overflow: hidden;
}
.img-section img{
    overflow: hidden;
    width:100%;
}
.img-section img:hover{
    opacity:0.6;
    transition: 0.5s;
    cursor: pointer;
}
.sectin-title h1{
    font-weight:700;
    font-size:23px;
    color:#285A63;
}
.section-detail p{
    color:#756d6d;
    letter-spacing: 1px;
}
.fa-star,.fa-star-half-alt{
    color:#FEC00B;
}
.fa-star-half-alt{
    margin-right: 10px;
}
4. Lebih baik lagi kamu meletakkan kedua file ini kedalam satu project atau folder biar mudah dalam pemanggilan file. Atau kamu bisa sesuaikan dengan proyek kamu.
5. Jika sudah, kamu bisa privew hasilnya di browser kamu. Jika berhasil maka hasilnya akan seperti dibawah ini.

Membuat Gird Shop dengan Bootstrap

Hal yang perlu kamu perhatikan adalah:

  • Bootstrap yang digunakan diatas adalah script online, jadi kamu haru terkoneksi dengan internet biar scriptnya berjalan dengan baik. Tapi jika kamu ingin menggunakan untuk offline kamu bisa download bootstrap4 yg offline nya.
  • Kamu bisa ganti produk image dengan gambar kamu sendiri, caranya sialhkan copy gambar ke dalam folder project dan ganti link gambar profil nya pada index.html.
  • Kamu bisa sesuakan semua link yang ada didalam script dengan proyek yang sedang kamu kerjakan.

Semoga tutorial Membuat Grid Toko Online Dengan Bootstrap 4 kali ini bisa bekerja dengan baik pada kamu juga, dan semoga desain grid shop ini bisa diterapkan pada project kamu. Apabila ada error atau pertanyaan bisa ditanyakan di kolom komentar dibawah ini.

Jika sudah paham, tidak ada salahanya meninggalkan jejak dikolom komentar saya, yang penting sopan dan tidak melanggar aturan dan SARA. jika kamu suka dengan desain grid shop kita kali ini bisa kamu share dan bagikan ke social media kamu biar teman-teman kamu juga belajar bersama kita.

0 Response to "Membuat Grid Toko Online Dengan Bootstrap 4"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel