Cara membuat button di kanan bootstrap

Table of Contents Show

Link Menu Rata Kanan
Membuat Bar Navigasi Atas
Button bootstrap
Tag memanggil button yang lain
Outline button
Ukuran Button
Aktif / Nonaktif Button
Perataan Button / Align button
Manakah class bawaan bootstrap 4 untuk menghasilkan tombol button yang lebih besar dari ukuran default?
Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

Pelajari cara membuat bilah navigasi dengan tautan rata kiri dan rata kanan.

Section Artikel

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>
</div>

<div style="padding-left:16px">
  <h2>Navigasi Atas dengan Link Rata Kanan</h2>
  <p>Ini content...</p>
</div>

</body>
</html>

Membuat Bar Navigasi Atas

Langkah 1) Tambahkan HTML

Contoh:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>

Langkah 2) Tambahkan CSS

Contoh:

/* Tambahkan warna background hitam ke navigasi atas */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Beri style link yang ada didalam bar navigasi */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Ubah warna link saat mengarahkan kursor */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Tambahkan warna pada link active/current */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Bagian rata kanan di dalam navigasi atas */
.topnav-right {
  float: right;
}

How To

Hai teman – teman, kembali lagi di dosenit.com. Setelah kemarin kita membahas mengenai Tabel dan form bootstrap, maka kali ini kita akan membahas salah satu elemen yang penting pada suatu website terutama website yang membutuhkan kontak langsung dengan user yaitu BUTTON.

sebelum membahas lebih dalam mengenai Button pada bootstrap, alangkah baiknya kita membahas mengenai dasar button dalam pemrograman html. Pada html, button dibuat dengan menambahkan tag

<button> tulisan</button>

Didalam tag <button> kita dapat menambahkan banyak tag lain didalamnya seperti <img>, <i>, <strong>, dll. Perhatikan contoh dibawah:

<html>
  <head>
    <title> belajar button</title>
  </head>
  <body>
    <button>ini button biasa</button><br><br>
    <button><i>button tulisan miring</i></button><br><br>
    <button><img src="https://www.seekpng.com/png/detail/52-521784_small-png-close-button-icon.png" /></button>
  </body>
</html>

Didalam button juga dapat kita masukkan java script seperti tag onClick

<html>
	<body>
	 <button type="button" onclick="alert('Hello world!')">Klik</button>
 	</body>
</html>

Setelah teman-teman mengetahui mengenai dasar tag html dari button, sekarang kita akan memasukkan style bootstrap dan jangan lupa menginputkan link bootstrap di dalam tag head. Disini saya menggunakan bootstrap 4.

Section Artikel

Button bootstrap

Button pada bootstrap terdapat beberapa macam diantaranya

Tipe ButtonCara memanggil / class yang diperlukanPrimary Buttonbtn btn-primarySecondary Buttonbtn btn-secondarySuccess Buttonbtn btn-successDanger Buttonbtn btn-dangerWarning Buttonbtn btn-warningInfo Buttonbtn btn-infoLight Buttonbtn btn-lightDark Buttonbtn btn-darkLink Buttonbtn btn-linkDefault buttonbtn btn-defaultdaftar style button bootstrap

agar lebih jelas lihat script dibawah:

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
    <button type="button" class="btn btn-default">Default</button>
  </body>
</html>

Tag memanggil button yang lain

Selain dengan menggunakan tag <button> dalam bootstrap kita dapat membuat button dengan menggunakan tag <a> dan <input>. contohnya:

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
	<a class="btn btn-primary" href="#" role="button">Link</a>
	<button class="btn btn-primary" type="submit">Button</button>
	<input class="btn btn-primary" type="button" value="Input">
	<input class="btn btn-primary" type="submit" value="Submit">
	<input class="btn btn-primary" type="reset" value="Reset">
  </body>
</html>

Outline button

Dalam contoh – contoh button bootstrap diatas warna latar atau gambar button memenuhi tampilan button secara keseluruhan. Nah bagaimana kalau hanya menampilkan button dengan outlinenya saja tanpa warna latar ataupun gambar ?, untuk itu kita hanya perlu menambahlan class btn-outline- . lihat contoh dibawah

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <button type="button" class="btn btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-outline-success">Success</button>
	<button type="button" class="btn btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-outline-info">Info</button>
	<button type="button" class="btn btn-outline-light">Light</button>
	<button type="button" class="btn btn-outline-dark">Dark</button>
  </body>
</html>

Ukuran Button

Dalam bootstrap kita bisa mengatur ukuran button dengan memasukkan tag btn-lg , btn-sm, atau btn-block didalam class button sebelumnya contoh :

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
	<button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
  </body>
</html>

Aktif / Nonaktif Button

Selain mengatur ukuran dalam bootstrap juga tersedia pilihan tag untuk mengatur kapan kita akan me-aktifkan button atau bahkan men-nonaktifkan atau disable button yang kita buat. contohnya

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
	<button type="button" class="btn btn-primary btn-lg active">button aktif</button>
    <button type="button" class="btn btn-primary btn-lg" disabled>button nonaktif</button>
    <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
  </body>
</html>

Khusus untuk tag <a> dalam menonaktifkan button yang dibuat ada sedikit perbedaan yaitu

menambahkan class .diabled dalam tag <a>, karena tag <a> tidak mendukung penggunaan attribut disable seperti tag button
pada tag <a> jika tombol dinonaktifkan harus menyertakan attribut aria-disable=”true” untuk menunjukan status elemennya
pada tag <a> saat tombol dinonaktifkan tidak akan terlihat kursor menjadi tanda nonaktif (silang), ini berlaku pada beberapa browser yang mendukung “pointer-event”

Perataan Button / Align button

Button pada bootstrap juga dapat kita atur perataannya atau align nya yaitu dengan menambahkan class .float-right untuk button rata kanan, .float-left untuk button rata kiri. Khusus button rata tengah tidak bisa memakai .float-center karena bootstrap tidak mendukung hal tersebut maka sebagai gantinya biasanya saya memakai

<div class=”col text-center”> <button class=”btn btn-primary”>button center</button></div>

untuk perataan button pada bootstrap 3 berbeda dari botstrap 4 yaitu menggunakan .pull-right atau .pull-left. sedangkan rata tengah sama dengan bootstrap 4.

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <button type="button" class="btn btn-outline-primary float-right">kanan</button><br><br>
	<button type="button" class="btn btn-outline-secondary float-left">kiri</button><br><br>
     <div class="col text-center">
      <button class="btn btn-outline-primary">button center dengan div</button>
    </div>
  </body>
</html>

Itulah tutorial sedikit tentang penggunaan button pada Bootstrap khususnya pada bootstrap 4, selain hal – hal diatas teman -teman juga dapat men-modifikasi sendiri style dari button teman-teman.

Caranya yaitu dengan mengatur tag button dengan CSS. Sehingga tampilan nya dapat kita gabungkan antara desain button kita dengan desain dari bootstrap agar terlihat lebih bagus.

Manakah class bawaan bootstrap 4 untuk menghasilkan tombol button yang lebih besar dari ukuran default?

btn-lg merupakan class bootstrap untuk membuat tombol dengan ukuran besar.

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus. Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm. Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.