Belajar Bootstrap dan Implementasi Pada React js

1. Pengertian Bootstrap

Bootstrap merupakan framework untuk membangun desain web secara responsif dan cepat. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan perangkat apa yang harus digunakan.

2.Cara Instal Bootstrap pada React js

3. Install boostrap dan Jquery 

Buka kembali terminal dan jalankan perintah berikut

1. npm install –save bootstrap
2. npm install bootstrap jquery –save
3. npm install popper.js –save
4. npm install react-owl-carousel2

4. Grid System pada bootstrap

Grid System merupakan pengaturan ukuran yang di tampilkan pada monitor. grid system berfungsi untuk membuat pengaturan untuk lebar dari masing-masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan halaman website yang kita buat dengan bootstrap.

5. Container di bagi menjadi dua 

1. container

2. container-fluid

3.  untuk lebih detailnya silahkan buka boostrap4

 

6. Implementasi Grid di Reactjs

 

7. Buka file index.js yang ada di dalam folder src

 

Untuk Pembahasan selanjutnya akan di bahas di part dua