Bootstrap Classes

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

Background Color and button Classes

<button type="button" class="btn btn-primary">Primary</button>

btn-primary bg-primary

btn-secondary bg-secondary

btn-success bg-success

btn-info bg-info

btn-warning bg-warning

btn-danger bg-danger

btn-dark bg-dark

btn-light bg-light

btn-link

text-muted || text-primary || text-success || text-info || text-warning || text-danger || text-danger || text-secondary || text-white || text-dark || text-body

table-primary || table-success || table-info || table-warning || table-danger || table-active || table-secondary || table-light || table-dark

table || table-striped || table-bordered || table-hover || table-dark || table-dark table-striped || table-dark table-hover || table-borderless || table-sm || table-responsive ||

table-responsive-sm || table-responsive-md || table-responsive-lg || table-responsive-xl || table-responsive-xxl

IMAGE rounded || rounded-circle || img-thumbnail || float-start || float-end || mx-auto || d-block || mx-auto d-block || img-fluid ||

mt-4 p-5 bg-primary text-white rounded
<h1>Jumbotron Example</h1>

text-uppercase || text-white || text-center ||

col || col-sm-12 || col-md-12 || col-lg-12 || col-xl-12 || col-xxl-12

font-size 16px by default || line-height by default 1.5rem

display-1 || display-6

alert alert-success

<strong>Success!</strong> This alert box could indicate a successful or positive action.

</div>

____________________________________

<button type="button" class="btn btn-outline-primary">Primary</button>

____________________________________

Large Small

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

____________________________________

Large fluid button

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

</div>

____________________________________

Active button disabled button

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

____________________________________

</button>

</button>

</button>

</button>

____________________________________

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

____________________________________

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button <div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<a class="dropdown-item" href="#">Tablet</a>

<a class="dropdown-item" href="#">Smartphone</a>

</div>

</div>="button" class="btn btn-primary">Sony</button>
</div>

____________________________________

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

____________________________________

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

____________________________________