Satoshi – Web3 and Finance Dashboard Theme

Accordion

Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.

It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.

<div class="accordion vstack gap-3" id="accordionExample">
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1"><span class="h6 fw-semibold">Purpose of our UI library?</span></button></h2>
    <div id="collapse1" class="collapse" aria-labelledby="heading1" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"><span class="h6 fw-semibold">Prior experience with Bootstrap required?</span></button></h2>
    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"><span class="h6 fw-semibold">How often do you update the UI library?</span></button></h2>
    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4"><span class="h6 fw-semibold">How to get started with your Bootstrap library?</span></button></h2>
    <div id="collapse4" class="collapse" aria-labelledby="heading4" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
</div>

Alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>

Avatars

<div class="avatar avatar-xs rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar avatar-sm rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar avatar-lg rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar avatar-xl rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>

Badges

Documentation and illustrative instances showcasing badges, which serve as our compact count and labeling element.

Primary Secondary Success Danger Warning Info Light Dark

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

Buttons

Solid buttons

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

Outline buttons

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

Soft buttons

<button type="button" class="btn bg-primary bg-opacity-25 bg-opacity-100-hover text-primary text-white-hover">Primary</button> <button type="button" class="btn bg-secondary bg-opacity-25 bg-opacity-100-hover text-secondary text-white-hover">Secondary</button> <button type="button" class="btn bg-success bg-opacity-25 bg-opacity-100-hover text-success text-white-hover">Success</button> <button type="button" class="btn bg-danger bg-opacity-25 bg-opacity-100-hover text-danger text-white-hover">Danger</button> <button type="button" class="btn bg-warning bg-opacity-25 bg-opacity-100-hover text-warning text-white-hover">Warning</button> <button type="button" class="btn bg-info bg-opacity-25 bg-opacity-100-hover text-info text-white-hover">Info</button>

Button Group

Cards

Bootstrap cards offer a versatile and customizable content holder with numerous variations and choices. For a comprehensive list of options, we recommend referring to the official Bootstrap documentation.

Activity timeline card

Asset Allocation

Bitcoin 47%

Price: $0.32

Value: $$23,000.00

Ethereum 47%

Price: $0.32

Value: $$7,500.00

Cardano 47%

Price: $0.32

Value: $$33,500.00

Binance 47%

Price: $0.32

Value: $$5,500.00

Linkchain 47%

Price: $0.32

Value: $$5,500.00

<div class="card">
  <div class="card-body pb-3">
    <h5 class="mb-3">Asset Allocation</h5>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/btc.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Bitcoin</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$23,000.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/eth.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Ethereum</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$7,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/ada.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Cardano</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$33,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/bnb.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Binance</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$5,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/bnb.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Linkchain</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$5,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card with balance stats

Balance

7.8%

23.863,21 USDT

Income

$23.863,21 USD

Expenses

$5.678,45 USD

<div class="card">
  <div class="card-body d-flex flex-column">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div>
        <h5>Balance</h5>
      </div>
      <div><span class="text-heading fw-bold"><i class="bi bi-arrow-up me-2"></i>7.8%</span></div>
    </div>
    <div class="text-2xl fw-bolder text-heading ls-tight">23.863,21 USDT</div>
    <div class="d-flex align-items-center justify-content-between mt-8">
      <div class="">
        <div class="d-flex gap-3 align-items-center">
          <div class="icon icon-sm icon-shape text-sm rounded-circle bg-dark text-success"><i class="bi bi-arrow-down"></i></div><span class="h6 fw-semibold text-muted">Income</span>
        </div>
        <div class="fw-bold text-heading mt-3">$23.863,21 USD</div>
      </div><span class="vr bg-dark bg-opacity-10"></span>
      <div class="">
        <div class="d-flex gap-3 align-items-center">
          <div class="icon icon-sm icon-shape text-sm rounded-circle bg-dark text-danger"><i class="bi bi-arrow-up"></i></div><span class="h6 fw-semibold text-muted">Expenses</span>
        </div>
        <div class="fw-bold text-heading mt-3">$5.678,45 USD</div>
      </div>
    </div>
  </div>
</div>

Card with charts

Earnings

<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Earnings</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="mx-n4">
      <div id="chart-users" data-height="250"></div>
    </div>
  </div>
</div>

Performance

<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Performance</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="mx-n4">
      <div id="chart-line" data-height="245"></div>
    </div>
  </div>
</div>

BTC to EUR Chart

1H 1D 1W 1M 1Y

<div class="card">
  <div class="card-body pb-0">
    <div class="row g-3 justify-content-between align-items-center">
      <div class="col-12 col-sm">
        <h5>BTC to EUR Chart</h5>
      </div>
      <div class="col-12 col-sm-auto">
        <div class="d-flex scrollable-x justify-content-between gap-1 p-1 align-items-center bg-body-secondary rounded text-xs fw-semibold"><a href="#" class="px-3 py-1 text-muted bg-white-hover bg-opacity-70-hover rounded">1H </a><a href="#" class="px-3 py-1 text-muted bg-white rounded shadow-1">1D </a><a href="#" class="px-3 py-1 text-muted bg-white-hover bg-opacity-50-hover rounded">1W </a><a href="#" class="px-3 py-1 text-muted bg-white-hover bg-opacity-50-hover rounded">1M </a><a href="#" class="d-none d-sm-inline-block px-3 py-1 text-muted bg-white-hover bg-opacity-50-hover rounded">1Y</a></div>
      </div>
    </div>
    <div class="mx-n4">
      <div id="chart-crypto-price" data-height="370"></div>
    </div>
  </div>
</div>

Earnings

<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Earnings</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="mx-n4">
      <div id="chart-bar" data-height="250"></div>
    </div>
  </div>
</div>

Card with icons

Top movers

<div class="position-relative d-flex align-items-center gap-3 bg-body-secondary bg-primary-hover rounded p-2">
  <div class="icon icon-shape rounded text-bg-primary text-lg"><i class="bi bi-star"></i></div><a href="#" class="stretched-link text-heading fw-bold">Top movers</a>
</div>

Bitcoin BTC/EUR

<div class="card border-primary-hover">
  <div class="card-body d-flex gap-3"><img src="../../img/crypto/icon/btc.svg" class="w-rem-7 h-rem-7 mt-1" alt="...">
    <div class=""><span class="d-block text-muted mb-1">Bitcoin</span> <span class="d-block text-lg fw-bold text-heading">BTC/EUR</span></div><span class="stretched-link ms-auto text-muted text-primary-hover" data-bs-target="#cryptoModal" data-bs-toggle="modal" role="button"><i class="bi bi-chevron-down"></i></span>
  </div>
</div>

Card with order history

Recent transactions

Bitcoin

Pending - 3 min ago

-1,500 USD

Cardano

Canceled - 3 min ago

-1,500 USD

Binance

Pending - 3 min ago

-1,500 USD

Bitcoin

Pending - 3 min ago

-1,500 USD

Bitcoin

Pending - 3 min ago

-1,500 USD

<div class="card">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-5">
      <div>
        <h5>Recent transactions</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="vstack gap-6">
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/btc.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Bitcoin</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/ada.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Cardano</h6>
            <p class="text-muted text-xs">Canceled - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/bnb.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Binance</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/btc.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Bitcoin</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/btc.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Bitcoin</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

Transaction History

Bitcoin 2 days ago

0xd029384sd343fd...eq23

Pending

+0.2948 BTC +$10,930.90

Cardano 2 days ago

0xd029384sd343fd...eq23

Canceled

+0.2948 BTC +$10,930.90

Binance 2 days ago

0xd029384sd343fd...eq23

Successful

+0.2948 BTC +$10,930.90

Bitcoin 2 days ago

0xd029384sd343fd...eq23

Pending

+0.2948 BTC +$10,930.90

Bitcoin 2 days ago

0xd029384sd343fd...eq23

Canceled

+0.2948 BTC +$10,930.90

Bitcoin 2 days ago

0xd029384sd343fd...eq23

Successful

+0.2948 BTC +$10,930.90

Bitcoin 2 days ago

0xd029384sd343fd...eq23

Successful

+0.2948 BTC +$10,930.90

Bitcoin 2 days ago

0xd029384sd343fd...eq23

Successful

+0.2948 BTC +$10,930.90

<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Transaction History</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-warning">Pending</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Cardano </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-danger">Canceled</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Binance </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-warning">Pending</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-danger">Canceled</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
    </div>
  </div>
</div>

NFT cards

Cool Cookies

#6504

Price: 3.5 ETH

<div class="card">
  <div class="position-relative group-item-invisible group-item-visible-hover"><img src="../../img/nfts/img-1.png" class="card-img-top" alt="...">
    <div class="group-item rounded-top d-flex flex-column p-4 position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-25">
      <div class="d-flex justify-content-between"><button type="button" class="btn btn-sm btn-square border-0 text-bg-dark bg-opacity-70 bg-opacity-100-hover" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas" aria-controls="cartOffcanvas"><i class="bi bi-basket"></i></button> <button type="button" class="btn btn-sm btn-square border-0 text-bg-dark bg-opacity-70 bg-opacity-100-hover"><i class="bi bi-heart"></i></button></div>
      <div class="text-center mt-auto"><button type="button" class="btn btn-sm btn-white" data-bs-toggle="modal" data-bs-target="#buyNftModal"><img src="../../img/crypto/icon/eth.svg" class="w-rem-5 h-rem-5 me-2" alt="..."> <span>Buy now</span></button></div>
    </div>
  </div>
  <div class="card-body p-3">
    <div class="d-flex align-items-center gap-2"><span class="h6 text-sm">Cool Cookies</span> <span class="icon icon-sm text-sm rounded-circle bg-success text-white"><i class="bi bi-check"></i></span></div>
    <div class="text-sm text-muted my-1">#6504</div>
    <div class="d-flex align-items-center gap-1 text-sm"><span class="text-muted">Price:</span> <span class="d-block text-heading fw-bold">3.5 ETH</span></div>
  </div>
</div>

Crypto Unicorns Market

3.5 ETH 1 of 100

2h 30m 40s left

Make offer

<div class="card"><img src="../../img/nfts/collection-1.png" class="card-img-top" alt="...">
  <div class="card-body"><span class="d-block text-heading text-base fw-bold">Crypto Unicorns Market</span>
    <div class="d-flex align-items-center justify-content-between"><span class="d-block text-primary text-base fw-bold">3.5 ETH</span> <span class="d-block text-muted text-sm">1 of 100</span></div>
    <div class="d-flex gap-2 justify-content-between mt-5">
      <div class="rounded-pill px-4 py-2 bg-body-secondary text-sm">2h 30m 40s left</div><a href="./nft-details.html" class="btn btn-sm btn-dark">Make offer</a>
    </div>
  </div>
</div>

Crypto Unicorns Market

3.5 ETH 1 of 100

8,888 items

See collection

<div class="card"><img src="../../img/nfts/collection-1.png" class="card-img-top" alt="...">
  <div class="card-body"><span class="d-block text-heading text-base fw-bold">Crypto Unicorns Market</span>
    <div class="d-flex align-items-center justify-content-between"><span class="d-block text-primary text-base fw-bold">3.5 ETH</span> <span class="d-block text-muted text-sm">1 of 100</span></div>
    <div class="d-flex gap-2 justify-content-between mt-5">
      <div class="rounded-pill px-4 py-2 bg-body-secondary text-sm">8,888 items</div><a href="./nft-collection.html" class="btn btn-sm btn-dark">See collection</a>
    </div>
  </div>
</div>

Payment cards

Cards List

Edit

My cards

John Snow - Metal

**4291 - Exp: 12/26

Active

Last used: 2 hrs ago

John Snow - Virtual

**4291 - Exp: 12/26

Active

Last used: 2 hrs ago

Team cards

Team cards will appear here

<div class="card">
  <div class="card-body pb-0">
    <div class="mb-2 d-flex align-items-center">
      <h5>Cards List</h5>
      <div class="ms-auto text-end"><a href="#" class="text-sm fw-semibold">Edit</a></div>
    </div>
    <div class="hstack gap-2 mt-4 mb-6"><button class="btn btn-sm btn-neutral"><i class="bi bi-plus me-2 d-none d-sm-inline-block"></i>New card</button> <button class="btn btn-sm btn-neutral"><i class="bi bi-gear me-2 d-none d-sm-inline-block"></i>Manage</button></div>
    <div class="surtitle mb-2">My cards</div>
    <div class="vstack gap-2 mx-n3">
      <div class="position-relative d-flex align-items-center p-3 rounded-3 bg-body-secondary-hover">
        <div class="flex-none"><img src="../../img/cards/visa.svg" class="w-rem-16 w-md-20 rounded" alt="..."></div>
        <div class="ms-3 ms-md-4 flex-fill">
          <div class="stretched-link text-limit text-sm text-heading fw-semibold" role="button" data-bs-toggle="offcanvas" data-bs-target="#cardDetailsOffcanvas" aria-controls="cardDetailsOffcanvas">John Snow - Metal</div>
          <div class="d-block text-xs gap-2 mt-1"><span>**4291 - Exp: 12/26</span></div>
        </div>
        <div class="d-none d-sm-block ms-auto text-end"><span class="badge bg-body-secondary text-success">Active</span>
          <div class="d-none d-sm-block text-xs text-muted mt-2">Last used: 2 hrs ago</div>
        </div>
      </div>
      <div class="position-relative d-flex align-items-center p-3 rounded-3 bg-body-secondary-hover">
        <div class="flex-none"><img src="../../img/cards/mastercard.svg" class="w-rem-16 w-md-20 rounded" alt="..."></div>
        <div class="ms-3 ms-md-4 flex-fill">
          <div class="stretched-link text-limit text-sm text-heading fw-semibold" role="button" data-bs-toggle="offcanvas" data-bs-target="#cardDetailsOffcanvas" aria-controls="cardDetailsOffcanvas">John Snow - Virtual</div>
          <div class="d-block text-xs gap-2"><span>**4291 - Exp: 12/26</span></div>
        </div>
        <div class="d-none d-sm-block ms-auto text-end"><span class="badge bg-body-secondary text-success">Active</span>
          <div class="d-none d-sm-block text-xs text-muted mt-2">Last used: 2 hrs ago</div>
        </div>
      </div>
    </div>
    <div class="surtitle mt-6">Team cards</div>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center px-0">
        <div><span class="d-flex align-items-center justify-content-center w-rem-16 w-md-20 py-3 rounded text-muted text-lg bg-body-secondary"><i class="bi bi-credit-card"></i></span></div>
        <div class="ms-3 ms-md-4 flex-fill">
          <div class="text-muted text-sm fw-semibold">Team cards will appear here</div>
        </div>
      </div>
    </div>
  </div>
</div>

Standard Plan

The perfect way to get started.

$ 59 / month

30 days 12 days left

Cancel plan Change plan

<div class="card">
  <div class="card-body py-4">
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-5">
      <div class="flex-1">
        <h6 class="h5 text-limit fw-semibold mb-1">Standard Plan</h6>
        <p class="text-sm text-muted d-none d-sm-block">The perfect way to get started.</p>
      </div>
      <div class="ms-sm-auto">
        <div class="d-flex align-items-center mt-5 mb-3 lh-none text-heading d-block display-5 ls-tight mb-0"><span class="fw-semibold text-2xl align-self-start mt-1 me-1">$</span> <span>59</span> <span class="d-inline-block fw-normal text-muted text-lg mt-sm-3 ms-1">/ month</span></div>
      </div>
    </div>
    <div class="d-flex align-items-center justify-content-between mb-1"><span class="text-sm text-muted fw-semibold text-heading d-block">30 days</span> <span class="text-sm text-muted fw-semibold d-block">12 days left</span></div>
    <div class="progress progress-sm shadow-none mb-6">
      <div class="progress-bar bg-primary" role="progressbar" style="width:70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <hr class="my-4">
    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between"><a href="#" class="text-muted text-danger-hover text-sm fw-semibold">Cancel plan</a> <a href="#" class="btn btn-sm btn-neutral">Change plan</a></div>
  </div>
</div>

Progress cards

65%

Today's Spendings 370,00 EUR

Daily Spending Limit 7.500,00 EUR

<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-start gap-4">
      <div class="flex-none progress-circle progress-circle-xl progress-circle-primary text-light" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="--value:65"><span class="text-primary fw-bold">65%</span></div>
      <div>
        <div class="mb-2"><span class="d-block text-xs text-muted text-opacity-75">Today&#39;s Spendings</span> <span class="d-block fw-bold text-heading text-sm">370,00 EUR</span></div>
        <div><span class="d-block text-xs text-muted text-opacity-75">Daily Spending Limit</span> <span class="d-block fw-bold text-heading text-sm">7.500,00 EUR</span></div>
      </div>
    </div>
  </div>
</div>

Spending limits

Daily transaction limit

$399.00 spent of $2000.00 20%

<div class="card">
  <div class="card-body">
    <h5 class="mb-4">Spending limits</h5>
    <div class="vstack gap-3">
      <div class="surtitle text-xs text-muted text-opacity-75">Daily transaction limit</div>
      <div class="progress w-100">
        <div class="progress-bar bg-primary" role="progressbar" aria-label="Basic example" style="width:20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="d-flex justify-content-between text-xs"><span>$399.00 spent of $2000.00</span> <span>20%</span></div>
    </div>
  </div>
</div>

Stats cards

USDT

Total balance

75.800,00 USDT

<div class="card bg-tertiary bg-opacity-10 border-tertiary border-opacity-40">
  <div class="card-body d-flex flex-column p-4">
    <div class="d-flex align-items-center gap-2"><img src="../../img/crypto/icon/usdt.svg" class="w-rem-5 flex-none" alt="...">
      <h6>USDT</h6>
    </div>
    <div class="mt-auto">
      <div class="text-xs mt-4">Total balance</div>
      <div class="text-sm fw-semibold">75.800,00 USDT</div>
    </div>
  </div>
</div>

BTC

3.2893 USDT

+13.7%

<div class="card border-primary-hover">
  <div class="card-body p-4">
    <div class="d-flex align-items-center gap-2"><img src="../../img/crypto/icon/btc.svg" class="w-rem-5 flex-none" alt="..."> <a href="/pages/page-details.html" class="h6 stretched-link">BTC</a></div>
    <div class="text-sm fw-semibold mt-3">3.2893 USDT</div>
    <div class="d-flex align-items-center gap-2 mt-1 text-xs"><span class="badge badge-xs bg-success"><i class="bi bi-arrow-up-right"></i> </span><span>+13.7%</span></div>
  </div>
</div>

Orders

EUR 25.040,00

20% vs last week

<div class="card">
  <div class="p-4">
    <h6 class="text-limit text-muted mb-3">Orders</h6><span class="text-sm text-muted text-opacity-90 fw-semibold">EUR</span> <span class="d-block h3 ls-tight fw-bold">25.040,00</span>
    <p class="mt-1"><span class="text-success text-xs"><i class="fas fa-arrow-up me-1"></i>20% </span><span class="text-muted text-xs text-opacity-75">vs last week</span></p>
  </div>
</div>

Market Cap

$19,3M +7.57%

<div class="card">
  <div class="card-body">
    <div class="d-flex gap-3 mb-1"><span class="text-muted">Market Cap</span></div>
    <div class="d-flex align-items-center"><span class="text-lg text-heading fw-bold">$19,3M </span><span class="ms-auto text-success text-sm fw-semibold">+7.57%</span></div>
  </div>
</div>

Dropdowns

<div class="dropdown"><button class="btn btn-neutral dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu">
    <div class="dropdown-header"><span class="d-block text-sm text-muted mb-1">Signed in as</span> <span class="d-block text-heading fw-semibold">Alexis Enache</span></div>
    <div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i class="bi bi-house me-3"></i>Home </a><a class="dropdown-item" href="#"><i class="bi bi-pencil me-3"></i>Edit profile</a>
    <div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i class="bi bi-gear me-3"></i>Settings </a><a class="dropdown-item" href="#"><i class="bi bi-image me-3"></i>Media </a><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-up me-3"></i>Share</a>
    <div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i class="bi bi-person me-3"></i>Login</a>
  </div>
</div>

<div class="dropdown"><button class="btn btn-neutral dropdown-toggle" type="button" id="userDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu" aria-labelledby="userDropdownMenuButton"><a href="#" class="dropdown-item d-flex gap-3 align-items-center position-relative">
      <div class="flex-none avatar avatar-xs bg-primary rounded-circle text-white">RF</div><span>Robert Fox </span>
    </a><a href="#" class="dropdown-item d-flex gap-3 align-items-center position-relative"><img src="../../img/memoji/memoji-1.svg" class="flex-none avatar avatar-xs rounded-circle" alt="..."> <span>Darlene Robertson </span></a><a href="#" class="dropdown-item d-flex gap-3 align-items-center position-relative"><img src="../../img/memoji/memoji-2.svg" class="flex-none avatar avatar-xs rounded-circle" alt="..."> <span>Theresa Webb </span></a><a href="#" class="dropdown-item d-flex gap-3 align-items-center position-relative">
      <div class="flex-none avatar avatar-xs bg-success rounded-circle text-white">KW</div><span>Kristin Watson </span>
    </a><a href="#" class="dropdown-item d-flex gap-3 align-items-center position-relative"><img src="../../img/memoji/memoji-3.svg" class="flex-none avatar avatar-xs rounded-circle" alt="..."> <span>Cody Fisher</span></a></div>
</div>

<div class="dropdown"><button class="btn btn-neutral dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="dropdown-item py-1 d-flex align-items-center">
      <div class="text-lg"><input class="form-check-input" type="checkbox" id="flexCheck1" value="" aria-label="..."></div>
      <div class="ms-3 me-5"><label for="flexCheck1">First option</label></div>
    </div>
    <div class="dropdown-item py-1 d-flex align-items-center">
      <div class="text-lg"><input class="form-check-input" type="checkbox" id="flexCheck2" value="" aria-label="..."></div>
      <div class="ms-3 me-5"><label for="flexCheck2">Second option</label></div>
      <div class="ms-auto"><span class="badge rounded-pill bg-opacity-25 bg-success text-success">23</span></div>
    </div>
    <div class="dropdown-item py-1 d-flex align-items-center">
      <div class="text-lg"><input class="form-check-input" type="checkbox" id="flexCheck3" value="" aria-label="..."></div>
      <div class="ms-3 me-5"><label for="flexCheck3">Third option</label></div>
    </div>
    <div class="dropdown-item py-1 d-flex align-items-center">
      <div class="text-lg"><input class="form-check-input" type="checkbox" id="flexCheck4" value="" aria-label="..."></div>
      <div class="ms-3 me-5"><label for="flexCheck4">Fourth option</label></div>
      <div class="ms-auto"><span class="badge rounded-pill bg-opacity-25 bg-warning text-warning">190</span></div>
    </div>
    <div class="dropdown-item py-1 d-flex align-items-center">
      <div class="text-lg"><input class="form-check-input" type="checkbox" id="flexCheck5" value="" aria-label="..."></div>
      <div class="ms-3 me-5"><label for="flexCheck5">Fifth option</label></div>
    </div>
    <div class="mt-3"><button class="btn btn-lg btn-primary w-100">Save</button></div>
  </div>
</div>

Forms

<form>
  <div class="mb-5"><label class="form-label" for="email">Email address</label> <input type="email" class="form-control" id="email"></div>
  <div class="mb-5">
    <div class="d-flex justify-content-between gap-2 mb-2 align-items-center"><label class="form-label mb-0" for="password">Password</label> <a href="#" class="text-sm text-muted text-primary-hover text-underline">Forgot password?</a></div><input type="password" class="form-control" id="password" autocomplete="current-password">
  </div>
  <div class="mb-5">
    <div class="form-check"><input class="form-check-input" type="checkbox" name="check_example" id="check_example"> <label class="form-check-label" for="check_example">Keep me logged in</label></div>
  </div>
  <div><a href="#" class="btn btn-dark w-100">Sign in</a></div>
</form>

Register form

<form>
  <div class="row g-5">
    <div class="col-sm-6"><label class="form-label">First name</label> <input type="text" class="form-control"></div>
    <div class="col-sm-6"><label class="form-label">Last name</label> <input type="text" class="form-control"></div>
    <div class="col-sm-12"><label class="form-label">Email address</label> <input type="email" class="form-control"></div>
    <div class="col-sm-12"><label class="form-label">Password</label> <input type="password" class="form-control"></div>
    <div class="col-sm-12"><label class="form-label">How did you hear about us?</label> <select class="form-select" aria-label="Default select example">
        <option selected="selected">From a friend</option>
        <option value="1">Online search</option>
        <option value="2">Social media</option>
        <option value="3">Advertising</option>
      </select></div>
    <div class="col-sm-12"><a href="#" class="btn btn-dark w-100">Sign up</a></div>
  </div>
</form>

List Groups

Crypto list

BTC Bitcoin

23.8

ETH Ethereum

1.200,50

ADA Cardano

10.930,00

BNB Binance

200

CHAIN Linkchain

200

<div class="px-6 py-5 border-bottom"><input type="text" class="form-control" placeholder="Search token or paste address" aria-label="Search"></div>
<div class="p-2">
  <div class="vstack">
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/btc.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">BTC</a> <span class="d-block text-muted text-sm">Bitcoin</span></div>
        <div class="ms-auto fw-bold text-heading">23.8</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/eth.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">ETH</a> <span class="d-block text-muted text-sm">Ethereum</span></div>
        <div class="ms-auto fw-bold text-heading">1.200,50</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/ada.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">ADA</a> <span class="d-block text-muted text-sm">Cardano</span></div>
        <div class="ms-auto fw-bold text-heading">10.930,00</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/bnb.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">BNB</a> <span class="d-block text-muted text-sm">Binance</span></div>
        <div class="ms-auto fw-bold text-heading">200</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/chain.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">CHAIN</a> <span class="d-block text-muted text-sm">Linkchain</span></div>
        <div class="ms-auto fw-bold text-heading">200</div>
      </div>
    </div>
  </div>
</div>
<div class="px-6 py-5 bg-body-secondary d-flex justify-content-center"><button class="btn btn-sm btn-dark"><i class="bi bi-gear me-2"></i>Manage tokens</button></div>

Crypto list

Security

Select the permissions you want to add to all the projects in this account.

Online transactions

Swipe payments

Contactless payments

<div class="">
  <div class="d-flex">
    <div class="flex-none w-rem-10"><i class="bi bi-folder-plus text-lg text-muted"></i></div>
    <div class="me-10"><a href="#" class="d-block h5">Security</a>
      <p class="mt-1 text-sm text-muted">Select the permissions you want to add to all the projects in this account.</p>
    </div>
  </div>
  <div class="vstack gap-3 mt-4 ms-10">
    <div class="d-flex align-items-center">
      <h6 class="text-sm fw-semibold">Online transactions</h6>
      <div class="form-check form-switch ms-auto"><input class="form-check-input me-n2" type="checkbox" name="switch1" id="switchView1" checked="checked"></div>
    </div>
    <hr class="my-0">
    <div class="d-flex align-items-center">
      <h6 class="fw-semibold">Swipe payments</h6>
      <div class="form-check form-switch ms-auto"><input class="form-check-input me-n2" type="checkbox" name="switch1" id="switchEdit1" checked="checked"></div>
    </div>
    <hr class="my-0">
    <div class="d-flex align-items-center">
      <h6 class="fw-semibold">Contactless payments</h6>
      <div class="form-check form-switch ms-auto"><input class="form-check-input me-n2" type="checkbox" name="switch1" id="switchPublish1"></div>
    </div>
  </div>
</div>

Crypto list

Popular

Solana

Avalanche

Solana

By connecting wallet, you agree to Satoshi's Terms of Service

<div class="list-group list-group-flush gap-2">
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/metamask.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">MetaMask</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-primary">Popular</span></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/coinbase.webp" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Coinbase Wallet</a></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/walletconnect.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">WalletConnect</a></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/phantom.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Phantom</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-light">Solana</span></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/core.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Core</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-light">Avalanche</span></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/glow.svg" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Glow</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-light">Solana</span></div>
    </div>
  </div>
</div>
<div class="text-xs text-muted mt-6">By connecting wallet, you agree to Satoshi's <a href="#" class="fw-bold">Terms of Service</a></div>

Accordion

Purpose of our UI library?

Prior experience with Bootstrap required?

How often do you update the UI library?

How to get started with your Bootstrap library?

Alerts

Avatars

Badges

Buttons

Solid buttons

Outline buttons

Soft buttons

Button Group

Cards

Activity timeline card

Asset Allocation

Card with balance stats

Balance

Card with charts

Earnings

Performance

BTC to EUR Chart

Earnings

Card with icons

Card with order history

Recent transactions

Bitcoin

Cardano

Binance

Bitcoin

Bitcoin

Transaction History

NFT cards

Payment cards

Cards List

Standard Plan

Progress cards

Spending limits

Stats cards

USDT

Orders

Dropdowns

User dropdown

Dropdown with avatars

Dropdown with checklist

Forms

Login form

Register form

List Groups

Crypto list

Crypto list

Online transactions

Swipe payments

Contactless payments

Crypto list