Bootstrap 4 - 04.1: Component

Sekarang kita memasukin tutorial bootstrap 4 bagian 4. Pada tutorial bagian 4 ini kita akan belajar tentang component component yang ada di bootstrap 4.  Pembahasan tentang component bootstrap 4 ini mungkin akan di bagi menjadi beberapa bagian. Ok, sekarang kita mulai saja ke pembahasan nya.

1. Alert

   <div class="alert alert-primary" role="alert">
     Contoh Alert
   </div>​

   Contoh Alert
   Komponen ​Alert ini dapat di gunakan mempinyai beberapa jenis yang dari masing masing jenis nya akan menampilkan tampilan yang berbeda beda berikut ini jenis jenis komponen alert
   1. alert-secondary
   2. alert-success
   3. alert-danger
   4. alert-warning
   5. alert-info
   6. alert-light
   7. alert-dark

   Penggunaan nya cukup dengan mengganti alert-primary pada contoh diatas.

2. Badges

   <h2>Rumah Code <span class="badge badge-secondary">^_^</span></h2>
   <button type="button" class="btn btn-primary">
     Rumah Code <span class="badge badge-light">^_^</span>
   </button>​

   Rumah Code ^_^

   Rumah Code ^_^

   <span class="badge badge-primary">Primary</span>
   <span class="badge badge-secondary">Secondary</span>
   <span class="badge badge-success">Success</span>
   <span class="badge badge-danger">Danger</span>
   <span class="badge badge-warning">Warning</span>
   <span class="badge badge-info">Info</span>
   <span class="badge badge-light">Light</span>
   <span class="badge badge-dark">Dark</span>

   Primary Secondary Success Danger Warning Info Light Dark

   Jika ingin menmpilkan badge dengan sisi nya rounded bisa menggunakan .badge-pill selain itu badge juga dapat di implementasikan untuk link berikut ini contoh nya

   <span class="badge badge-pill badge-primary">Contoh Badge-pill</span>
   <a href="#" class="badge badge-primary">Contoh Link Badge</a>

   Contoh Badge-pill Contoh Link Badge
3. Breadcrumb biasanya di gunakan untuk navigasi

   <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
       <li class="breadcrumb-item"><a href="https://www.rumahcode.org/">Rumah Code</a></li>
       <li class="breadcrumb-item"><a href="https://www.rumahcode.org/blog">Library</a></li>
       <li class="breadcrumb-item active" aria-current="page">Bootstrap 4 - 04.1: Component</li>
     </ol>
   </nav>​

4. Buttons

   <button type="button" class="btn btn-primary">Button</button>
   <a class="btn btn-secondary" href="#" role="button">Link</a>
   <button type="button" class="btn btn-outline-success">Outline Buttons</button>
   <button type="button" class="btn btn-danger btn-lg">btn-lg</button>
   <button type="button" class="btn btn-warning btn-sm">btn-sm</button>
   <button type="button" class="btn btn-info btn-lg btn-block">btn-lg btn-block</button>
   <a href="#" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">btn-sm active</a>
   <button type="button" class="btn btn-light btn-lg" disabled>Disabled Button</button>
   <button type="button" class="btn btn-dark" data-toggle="button" aria-pressed="false" autocomplete="off">
      data-toggle
   </button>
   <button type="button" class="btn btn-link">Link</button>​

   Button Link Outline Buttons btn-lg btn-sm btn-lg btn-block btn-sm active Disabled Button data-toggle Link
5. Button group

   <div class="btn-toolbar mb-3" role="toolbar" aria-label="Contoh Button Group">
     <div class="btn-group mr-2" role="group" aria-label="First group">
       <button type="button" class="btn btn-secondary">1</button>
       <button type="button" class="btn btn-secondary">2</button>
     </div>
     <div class="btn-group" role="group">
       <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Next
       </button>
       <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
         <a class="dropdown-item" href="#">3</a>
         <a class="dropdown-item" href="#">4</a>
       </div>
     </div>
     <div class="input-group">
       <div class="input-group-prepend">
         <div class="input-group-text" id="btnGroupAddon">@</div>
       </div>
       <input type="text" class="form-control" placeholder="Input group example" aria-label="Rumah Code" aria-describedby="btnGroupAddon">
     </div>
   </div>

   1 2

   Next

   3 4

   @

Lanjut ke Bootstrap 4 - 04.2: Component