Skip to main content

Membuat Button Group pada Bootstrap

Pada kesempatan kali ini saya akan memberikan beberapa contoh penggunaan dan pembuatan BUTTON GROUP pada BOOTSTRAP. Button gorup digunakan untuk membuat button atau tombol secara tergabung. 

Untuk membuat BUTTON secara terpisah dapat anda lihat pada link berikut :
  
  Cara Membuat Button pada Bootstrap

Pembuatan BUTTON GROUP hanya berbeda sedikit dengan BUTTON biasa. namun pada pembuatan BUTTON GROUP juga mempunyai beberapa class, yaitu:
  • btn-group                 : Membuat button group standar.
  • btn-group-lg|md|sm  : Membuat button group dengan ukuran. 
  • btn-group-vertical     : Membuat button group secara vertical.
  • btn-group-justified     : Membuat button group secara rata kanan kiri.
BTN GROUP STANDAR
<div class="container">
<H1>MEMUAT BUTTON GROUP PADA BOOTSTRAP | NET02OPTION</H1>
<div class="btn-group">
<a href="#" class="btn btn-success">BUTTON</a>
<a href="#" class="btn btn-primary">BUTTON</a>
<a href="#" class="btn btn-info">BUTTON</a>
<a href="#" class="btn btn-warning">BUTTON</a>
</div>
</div>

BTN GROUP LG|MD|SM
pada contoh dibawah digunakan class btn-group-lg 
<div class="container">
<H1>MEMUAT BUTTON GROUP PADA BOOTSTRAP | NET02OPTION</H1>
<div class="btn-group btn-group-lg">
<a href="#" class="btn btn-success">BUTTON</a>
<a href="#" class="btn btn-primary">BUTTON</a>
<a href="#" class="btn btn-info">BUTTON</a>
<a href="#" class="btn btn-warning">BUTTON</a>
</div>
</div>

BTN GROUP VERTICAL
<div class="container">
<H1>MEMUAT BUTTON GROUP PADA BOOTSTRAP | NET02OPTION</H1>
<div class="btn-group btn-group-vertical">
<a href="#" class="btn btn-success">BUTTON</a>
<a href="#" class="btn btn-primary">BUTTON</a>
<a href="#" class="btn btn-info">BUTTON</a>
<a href="#" class="btn btn-warning">BUTTON</a>
</div>
</div>

BTN GROUP JUSTIFIED

<div class="container">
<H1>MEMUAT BUTTON GROUP PADA BOOTSTRAP | NET02OPTION</H1>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-success">BUTTON</a>
<a href="#" class="btn btn-primary">BUTTON</a>
<a href="#" class="btn btn-info">BUTTON</a>
<a href="#" class="btn btn-warning">BUTTON</a>
</div>
</div>
 
 Terimakasih, semoga dapat bermanfaat bagi pembaca sekalian. 
 
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Mengganti Warna Pada Bootstrap

Penggunaan warna merupakan hal yang sering dilakukan, selain memperindah tampilan dari sebuah web, warna juga dapat membuat kita memberikan tanda penting pada sebuah artikel maupun data yang penting. Pada BOOTSTRAP terdapat beberapa class default yang ada untuk memberikan warna pada button, table, dan lainnya. Class tersebut adalah sebagai berikut : success : class ini memberikan warna hijau. anda juga dapat menggunakan class ini untuk memberikan tanda bahwa sesuatu itu berhasil. misal untuk membuat alerts atau peringatan bahwa apa yang ada kerjakan berhasil. primary : class ini memberikan warna biru. seperti success , class ini dapat anda gunakan untuk memberikan sebuah tanda. danger : class ini memberikan warna merah.  warning : class ini memberikan warna kuning. info : class ini memberikan warna biru muda.  Penggunaan class warna ini dapat di lakukan pada beberapa tempat, seperti button , alerts , table , dan lain sebagainya. untuk yang akan di contohkan adalah...
Post a Comment
Read more

Cara Membuat Tombol Button pada Bootstrap

Pada kesempatan kali ini akan dibahas mengenai pembuatan BUTTON pada bootstrap. Penggunan button pada bootstrap memiliki beberapa class yang telah tersedia yaitu : btn-lg : Untuk membuat button dengan ukuran besar. btn-md : Untuk membuat button dengan ukuran medium atau sedang. btn-sm : Untuk membuat button dengan ukuran kecil. btn-xs : Untuk membuat button dengan ukuran sangat kecil. btn-block : Untuk membuat button dengan ukuran 100%. active : Untuk membuat button dengan fungsi yang dapat di click. disabled : Untuk membuat button namun tidak dapat di click.  Untuk lebih jelasnnya akan di tunjukan contoh penggunaan dibawah ini. SOURCE CODE Untuk lebih terperinci mari bahas satu persatu dari fungsi yang telah diperlihatkan contohnya di atas. BUTTON LG/MD/SM/XS SOURCE CODE < div class = "container" > < H1 > MEMBUAT TOMBOL | NET02OPTION </ H1 > < a href = "#" class = "btn btn-success bt...
Post a Comment
Read more

Membuat Tabel dengan Bootstrap

Pada kesempatan ini, saya akan membagikan bagaimana cara membuat tabel dengan bootstrap. cara yang digunakan tidak sulit namun tetap ada beberapa hal yang harus diperhatikan. pada pembuatan tabel di perlukan berapa  CLASS.  .table : penggunaan class untuk membuat tabel standar .table-striped :class tambahan yang ada pada tabel, berfungsi membuat table berwarna dengan warna seperti zebra. .table-bordered : membuat border disekitar tabel .table-hover : membuat table saat terkena cursor akan berwarna gelap .table-condensed : menghilangkan padding sehingga tabel terlihat lebih rapat. TABLE STANDAR Tampilan tabel standar akan terlihat seperti gambar di atas. untuk source code adalah sebagai berikut : TABLE-STRIPED Tampilan tabel striped akan terlihat seperti gambar di atas. untuk source code adalah sebagai berikut : TABLE-BORDERED Tampilan tabel striped akan terlihat seperti gambar di atas. untuk source code adalah sebagai berikut : ...
Post a Comment
Read more