membuat tombol dengan bootstrap

Bootstrap Part 4 : Membuat Tombol Dengan Bootstrap


Membuat Tombol Dengan Bootstrap

Selain mampu mendesign tampilan table, menu navigasi dan lain-lainnya, bootstrap juga memiliki kemampuan untuk mendesign tombol atau hyperlink. dan cara membuat tombol dengan bootstrap juga sangat mudah. anda hanya tinggal menambahkan class “btn” untuk mendifinisikan element menjadi tombol, dan kemudian mengatur warna tombol yang anda inginkan, serta mengatur ukuran tombol yang anda inginkan.

Bootstrap menyediakan beberapa class yang bisa kita gunakan untuk mendesign atau menciptakan bentuk tombol yang menarik. berikut ini adalah beberapa class bootstrap yang bisa di gunakan untuk membuat tombol, mengatur ukuran dan mengatur warna dari tombol tersebut.

  • .btn
    btn merupakan class bootstrap yang bisa di gunakan untuk membuat tombol.
  • .btn-xs
    btn-xs merupakan class bootstrap untuk membuat tombol dengan ukuran sangat kecil atau extra kecil.
  • .btn-sm
    btn-sm merupakan class bootstrap untuk membuat tombol dengan ukuran yang kecil.
  • .btn-md
    btn-md merupakan class bootstrap untuk membuat tombol dengan ukuran sedang.
  • .btn-lg
    btn-lg merupakan class bootstrap untuk membuat tombol dengan ukuran besar.
  • .btn-danger
    btn-danger merupakan class bootstrap untuk membuat tombol berwarna merah.
  • .btn-default
    btn-default merupakan class bootstrap untuk membuat tombol dengan warna standar bootstrap.
  • .btn-warning
    btn-warning merupakan class bootstrap untuk membuat tombol berwarna kuning.
  • .btn-primary
    btn-primary merupakan class bootstrap untuk membuat tombol berwarna biru.
  • .btn-info
    btn-danger merupakan class bootstrap untuk membuat tombol berwarna biru langit.
  • .btn-success
    btn-success merupakan class bootstrap untuk membuat tombol berwarna hijau.

Cara membuat tombol dengan bootstrap

Untuk membuat tombol dengan bootstrap anda bisa menggunakan tag <button> atau bisa juga menggunakan tag hyperlink yaitu <a>. Silahkan perhatikan contoh membuat tombol dengan bootstrap di bawah ini. yang menggunakan class-class tombol bootstrap yang telah di jelaskan di atas.

dan hasilnya Membuat tombol dengan bootstrap

membuat tombol dengan bootstrap

membuat tombol dengan bootstrap

See the Pen BjWJmN by Malas Ngoding (@malasngoding) on CodePen.0

Sekian tutorial belajar bootstrap part 4 : Membuat tombol dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • membuat button bootstrap
  • kode class tombol bootstrap
  • coding warna hijau pada button framework bootstrap
  • cara buat tombol home berwarna
  • memberi warna button pada html
  • malas ngoding bootstrap part 2
  • membuat carousekereb di boostap
  • macam2 warna yg disediakan di bootstrap
  • membuat button dengan bootstrap
  • cara membuat button bootstrap




About the author
Diki Alfarabi Hadi

Bos in www.malasngoding.com. Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • One Comment
  • […] Part 2 : Membuat Table dengan Bootstrap Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap Bootstrap Part 4 : Membuat Tombol dengan Bootstrap Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap Bootstrap Part 6 : Membuat Pesan Alert dengan […]



Write a Comment

Your email address will not be published. Required fields are marked *