Button Bootstrap 5.3 - Bootstrap Tutorial

Button Bootstrap 5.3 - Untuk pengguna Bootstrap tentunya sudah familiar dengan penulisan Button, tapi bagi pemula seperti Saya tentunya banyak lupa tentang HTML penulisannya. Dibawah ini adalah kode HTML Untuk Button Bootstrap.

Macam-macam Button

Ada beberapa macam Button Bootstrap, dari mulai Button Standar, Button Small, Button Outline dan Larger Button.

Button Standar

Kode HTML

 <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 Standar Small

Kode HTML

<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-light btn-sm">Light</button>
<button type="button" class="btn btn-dark btn-sm">Dark</button> 

Button Outline Standar

Kode HTML

<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>

Button Outline Standar Small

Kode HTML

<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
<button type="button" class="btn btn-outline-success btn-sm">Success</button>
<button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
<button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
<button type="button" class="btn btn-outline-info btn-sm">Info</button>
<button type="button" class="btn btn-outline-light btn-sm">Light</button>
<button type="button" class="btn btn-outline-dark btn-sm">Dark</button>

Button dengan Link

Kode HTML

<a class="btn btn-primary" href="#" role="button">Link</a>

Menyimpan Button Supaya Center

Kode HTML

<div class="text-center">
	<a class="btn btn-primary" href="#" role="button">Link</a>
</div>

atau bisa juga seperti ini

<div class="mx-auto">
	<a class="btn btn-primary" href="#" role="button">Link</a>
</div>

Menyimpan Dua Button Supaya Center

Kode HTM

<div class="text-center">
  <a class="btn btn-primary" href="#" role="button">Link</a>
  <a class="btn btn-danger" href="#" role="button">Link</a>
</div>

Button Center Banyak

Apabila button banyak, supaya tidak nempel ketika di layar yang lebih kecil seperti HP, tambahkan class mb-1 artinya margin-bottom:.25em. Contohnya seperti ini:

Kode HTML

<div class="m-4 text-center">
<a href="/tool/get-youtube-thumbnail.html" target="_blank" class="btn btn-danger mb-1">Get Youtube Thumbnail</a>
<a href="/tool/gdrive-direct-link.html" target="_blank" class="btn btn-primary mb-1">GDrive Link Generator</a>
<a href="/tool/github-to-jsdelivr.html" target="_blank" class="btn btn-success mb-1">Migrate GitHub to jsDelivr</a>
<a href="https://previewhtml.github.io/" target="_blank" class="btn btn-primary mb-1">GitHub HTML Preview</a>
<a href="/tool/github-video-viewer.html" target="_blank" class="btn btn-danger mb-1">GitHub Video Viewer</a>
<a href="/tool/responsinator.html" target="_blank" class="btn btn-warning mb-1">Responsinator</a>
<a href="https://tutorial.kang-ismet.com/tryit/" target="_blank" class="btn btn-info mb-1">Try it Editor</a>
<a href="https://arabickeyboard.kang-ismet.com/" target="_blank" class="btn btn-dark mb-1">Arabic Keyboard</a>
<a href="/tool/pre-code-parser.html" target="_blank" class="btn btn-danger mb-1">Parse Kode</a>
<a href="/tool/hljs-manual.html" target="_blank" class="btn btn-secondary mb-1">HLJS Manual</a>
</div>

Semoga Bermanfaat...