<strong>Bootstrap</strong> adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh <a href="https://twitter.com/mdo" target="_blank">Mark Otto</a> dan <a href="https://twitter.com/fat" target="_blank">Jacob Thornton</a>. Saat ini Bootstrap dikembangkan secara <em>open source</em> dengan lisensi MIT. Kita bisa memantau perkembangan proyek Bootstrap melalui web resminya di <a href="http://getbootstrap.com" target="_blank">getbootstrap.com</a> dan Githubnya di <a href="https://github.com/twbs/bootstrap" target="_blank">https://github.com/twbs/bootstrap</a>.

Jujur saja, saya sendiri sangat terbantu oleh Bootstrap. Banyak sekali tampilan web yang telah saya buat dengan bantuan Bootstrap, bahkan web CodePolitan yang ini pun kami kembangkan tamplatenya dengan Bootstrap. Bootstrap sangat memanjakan kita dalam membuat tampilan web dan membuat kerja menjadi lebih cepat. Bagaimana tidak, kita tidak lagi harus memulai semuanya dari nol ketika membuat tampilan web. Bootstrap telah menyediakan banyak sekali class CSS dan plugin JavaScript yang bisa langsung kita pakai untuk membantu mempermudah kita membuat halaman web. Karena kemudahaan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.

Saat tulisan ini dibuat sebenernya udah ada <a href="http://v4-alpha.getbootstrap.com/" target="_blank">Bootstrap 4</a>, namun masih versi Alpha. So, kita pakai saja dulu Bootstrap 3-nya yang udah stabil untuk memulai belajar sambil menunggu Bootstrap 4 versi stabilnya keluar. 

Sebelum kita akan mulai bagaimana cara menggunakan Bootstrap dalam membuat halaman web, kita perlu tahu dulu bagaimana cara Bootstrap itu bekerja. Sehingga nanti kita bisa mengoptimalkan manfaatnya buat pembuatan web kita. Jadi pada dasarnya Bootstrap merupakan sebuah kumpulan class CSS dan plugin JavaScript yang sudah siap pakai. Biasanya kan ketika kita membuat sebuah tampilan web kita akan membuat file HTML yang di dalamnya berisi berbagai macam TAG HTML. 

Misalnya saja ketika kita ingin membuat sebuah tombol berwarna merah seperti berikut:

<img src="https://static.cdn-cdpl.com/wp-images/2015/12/Screen-Shot-2015-12-21-at-16.20.05.png" alt="Screen Shot 2015-12-21 at 16.20.05" width="175" height="65" class="aligncenter size-full wp-image-6536" />

Maka yang biasa kita lakukan adalah membuat sebuah TAG HTML yaitu TAG BUTTON kemudian memberikan CLASS, contohnya <strong>tombol-merah</strong>, seperti berikut:

```
<button type="button" class="tombol-merah">CONTOH TOMBOL</button>
```

Selanjutnya kita harus membuat file CSS untuk mengatur bagaimana penampilan dari dari CLASS atau ID button yang telah kita buat tadi. Misalnya seperti berikut:

```
.tombol-merah {
	background: #c0392b;
	color: #ffffff;
	border: 1px solid #c0392b;
	padding: 20px 30px;
}
```

Nah, dengan Bootstrap kita tidak lagi akan memulainya dari nol. Tidak lagi harus menulis semua kode CSS, terutama yang standar, karena itu sudah dilakukan oleh Bootstrap. Kita hanya perlu menuliskan kode CSS yang kita butuhkan saja yang tidak disediakan oleh Bootstrap. Umpamanya kita ingin membuat sebuah tombol, maka kita bisa melihat bahwa Bootstrap telah menyediakan 6 jenis tombol yang bisa kita gunakan.

<img src="https://static.cdn-cdpl.com/wp-images/2015/12/Screen-Shot-2015-12-21-at-16.37.51.png" alt="Screen Shot 2015-12-21 at 16.37.51" width="451" height="45" class="aligncenter size-full wp-image-6537" />

Kalau kita ingin membuat tombol merah, kita cukup memberikan class <strong>btn</strong> dan <strong>btn-danger</strong> pada TAG BUTTON yang ingin kita buat merah, maka simsalabim langsung berubah jadi merah dengan indah, bahkan tanpa kita turun tangan untuk menulis kode CSS-nya.

```
<button type="button" class="btn btn-primary">CONTOH TOMBOL</button>
```

Hasilnya seperti berikut:

<img src="https://static.cdn-cdpl.com/wp-images/2015/12/Screen-Shot-2015-12-21-at-16.45.56.png" alt="Screen Shot 2015-12-21 at 16.45.56" width="155" height="41" class="aligncenter size-full wp-image-6538" />

Nggak kalah gaul dan ketche kan tombolnya? Hehehe... :D

<h4>Wah tombolnya kecil banget, saya pengen tombolnya agak besar</h4>

Yasudah tambahkan class <strong>btn-lg</strong> pada tombol tersebut, maka akan langsung berubah jadi besar tombolnya. Karena Bootstrap punya 4 jenis ukuran untuk tombol, tinggal yang mana yang kita gunakan, tergantung kebutuhan.

```
<button type="button" class="btn btn-primary btn-lg">CONTOH TOMBOL</button>
```

Hasilnya:

<img src="https://static.cdn-cdpl.com/wp-images/2015/12/Screen-Shot-2015-12-21-at-16.47.55.png" alt="Screen Shot 2015-12-21 at 16.47.55" width="200" height="53" class="aligncenter size-full wp-image-6539" />

Oke, intinya seperti itu. Jadi si Bootstrap itu sudah menyediakan banyak sekali class yang bisa kita gunakan, mulai dari tombol, form, tabel, grid, nav, list, dan lain sebagainya.

<h4>Tapi bagaimana jika dari tombol yang disediakan Bootstrap tidak ada yang saya inginkan, atau saya ingin memodifnya?</h4>

Nah disitulah baru kita menulis kode CSS tambahan kita. Karena sejatinya Bootstrap hanyalah sebuah framework yang memungkinkan untuk mempermudah kerja kita, namun pasti ada saja sesuatu yang tidak akan ada pada Bootstrap yang kita butuhkan. Tapi paling tidak kerjaan kita pasti menjadi lebih cepat dan terbantu.

<h4>Oke, saya paham. Jadi sekarang bagaimana caranya saya bisa memulai menggunakan Bootstrap?</h4>

Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:

<h3>1. Download File Bootstrap</h3>

Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di <a href="http://getbootstrap.com/getting-started/" target="_blank">http://getbootstrap.com/getting-started/</a>. 

<img src="https://static.cdn-cdpl.com/wp-images/2015/12/Screen-Shot-2015-12-21-at-17.01.00.png" alt="Screen Shot 2015-12-21 at 17.01.00" width="1057" height="813" class="aligncenter size-full wp-image-6540" />

Kemudian klik tombol <strong>Download Bootstrap</strong> yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah :D

Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama <strong>bootstrap-3.3.6-dist.zip</strong>.

<h3>2. Ekstrak File Bootstrap</h3>

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (<strong>bootstrap-3.3.6-dist.zip</strong>) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama <strong>bootstrap-3.3.6-dist</strong> dan di dalamnya ada beberapa folder lagi yaitu <strong>css</strong>, <strong>js</strong> dan <strong>fonts</strong>. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file <strong>bootstrap-3.3.6-dist.zip</strong> yang telah diekstrak tadi.

bootstrap-3.3.6-dist/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

<h3>3. Buatlah Sebuah File</h3>

Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama <strong>index.html</strong>, simpan file tersebut di dalam folder <strong>bootstrap-3.3.6-dist</strong> tadi, kemudian tuliskan kode berikut:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Template</title>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
    
    
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

      <p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
    </div>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
```

Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

<h4>1. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada, relative terhadap file html yang memanggilnya.</h4>

<pre><link href="css/bootstrap.min.css" rel="stylesheet"></pre>

Karena kebetulan file <strong>index.html</strong> yang kita buat berada di dalam folder <strong>bootstrap-3.3.6-dist</strong> dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis <strong>css/bootstrap.min.css</strong>.

<h4>2. Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript Bootstrap berada, relative terhadap file html yang memanggilnya.</h4>

```
<script src="js/bootstrap.min.js"></script>
```

Karena pada contoh kita, file <strong>index.html</strong> yang kita buat di dalam folder <strong>bootstrap-3.3.6-dist</strong> dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis <strong>js/bootstrap.min.js</strong>. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

<h4>3. Pastikan JQuery terpanggil</h4>

Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari <em>library</em>-nya Google:

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
```

Sebenernya kamu bisa juga sih memanggil JQuery-nya <em>offline</em> (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.

Oke, jika semuanya sudah aman, coba silahkan buka file <strong>index.html</strong> yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.

<img src="https://static.cdn-cdpl.com/wp-images/2015/12/Screen-Shot-2015-12-21-at-17.36.04.png" alt="Screen Shot 2015-12-21 at 17.36.04" width="763" height="528" class="aligncenter size-full wp-image-6541" />

Oke demikianlah tutorial cara penggunaan Bootstrap kali ini. Semoga bermanfaat dan dapat membantu buat temen-temen Coders yang mau belajar menggunakan Bootstrap. Jika ada yang kurang jelas atau yang perlu ditambahkan dari tutorial saya di atas, silahkan dituliskan saja ya di kolom komentar :D

<em>Enjoy coding!</em>

Cara Menggunakan Bootstrap 3 untuk Membuat Web

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Cara Menggunakan Bootstrap 3 untuk Membuat Web

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Kenalan Dengan Markdown

Menampilkan Font Awesome di HTML, Simpel!

Meetup dengan Pendiri Wordpress di 3rd Jakarta WordPress Meetup

Tantangan-Tantangan Yang Sering Dihadapi Saat Belajar Pemrograman

Google Ganti Logo

nyankodMagz, Majalah Pemrograman yang Bikin Perut Lapar Pindah Web