Membuat Layout Zigzag Responsive part 1

Setelah kemarin kita sempat membahas beberapa trik tentang menggunakan bootstrap, sekarang ini kita akan mencoba trik baru untuk membuat sebuah layout zigzag responsive menggunakan bootstrap.

Pada artikel sebelumnya kita sudah pernah membahas tentang cara membuat timeline sederhana dengan bootstrap 3

Bootstrap sendiri adalah framework responsive yang bisa dibilang menjadi salah satu yang paling banyak digunakan dalam membangun sebuah website. dengan banyak sekali fitur dan kemudahan yang diberikan dalam setiap kode yang dibuat pada bootstrap.

Baiklah teman teman, cara membuat layout zigzag bootstrap kita mulai dari menghubungkan file html dengan file javascript serta css bootstrap.

Selanjutnya kita akan membuat struktur html yang akan kita gunakan untuk membuat struktur layout zigzag responsive dengan bootstrap.

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step One</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/2" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step Two</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/3" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step Three</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/4" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step Three</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/5" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Bonus Step</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

 

 

Dengan struktur diatas kita memanfaatkan struktur list UL dan LI pada bootstrap dan memberikan custom class dengan nama timeline, timeline-image, timeline-panel,dan timeline-body

Pada artikel selanjutnya kita akan bahas lebih lanjut mengenai penggunaan property CSS yang akan kita terapkan pada layout zigzag responsive dengan bootstrap ini.

Baiklah teman teman, demikian artikel kali ini yang membahas tentang layout zigzag responsive dengan bootstrap. Selanjutnya ada di Membuat Layout Zigzag Responsive Part 2.

30 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat