Membuat Layout Bootstrap Custom Grid Di Drupal

Masih melanjutkan artikel tentang cara simpel membuat website anggun dengan drupal & bootstrap, sebelumnya saya pernah menunjukan tentang tata cara membuat layout bootstrap grid, dalam pembuatan layout tersebut saat class small screen col-sm-6 dimenambahkan ke layout grid ternyata tampilannya sedikit kurang responsive ada konten yang mengantung, konten tidak terbagi secara rata

Untuk mengatasi hal tersebut kita sanggup memakai module equalHeight dan module equalHeight membutuhkan module libraries. Selanjutnya sesuai dengan dokumentasi yang terdapat pada module equalHeight kita perlu menambahkan pugin imageloaded dan ditaruh di sites/all/libraries/

Installation
------------
Starting with 7.x-2.x, equalheights module requires Libraries API 2.x. and imagesloaded plugin. If you have drush installed
on your machine, it's going to download required libraries. Otherwise, procede with the manual installation.

Installing required libraries manually.
-------------------------------------
Before installing equalheights module, download imagesloaded plugin from https://github.com/desandro/imagesloaded/releases/tag/v2.1.2.
You need two files: jquery.imagesloaded.js and jquery.imagesloaded.min.js. They should be copied to sites/all/libraries/imagesloaded.
You can also use git to clone the repository from the github.

Membuat Layout Custom Grid Bootstrap di Drupal

1. Instal module EqualHeight dan Libraries
2. Kemudian download dan ekstrak plugin imageloaded ke sites/all/libraries
3. Aktifkan module librari dan equalheight kemudian lakukan seting untuk media query equalheight, buat class kemudian menambahkan misal min-width:768px, shingga pada kondisi screen minimal 768px, class equalheight diaktifkan
   
   
   
4. Clone view page layout grid, kemudian lakukan pengaturan menyerupai diberikut
   
5. Pada format atur menjadi unformatted list nanti menambahkan class col untuk smal screnn dan medium screen, selanjutnya menambahkan class equalheight yang sebelumnya sudah dibuat. misal : col col-sm-6 col-md-4 equalHeight
6. Atur tiruana konten view custom grid menyerupai yang terlihat pada pengaturan diatas, terkahir simpan/save

Untuk lebih lengkapnya Anda sanggup melihat video pembuatan layout bootstrap custom grid pada playlist Teknik Membuat Website Cantik melaluiataubersamaini Drupal & Bootstrap yang terdapat pada channel youtube Saya

Video Membuat Layout Bootstrap Custom Grid di Drupal

Share :