Code

LinkTree for Donations using Bootstrap

In this tutorial, I'm going to show you how-to create your own LinkTree page for listing ways to donate to you, using Bootstrap and a bit of custom HTML and CSS.

Brandon Himpfen

Mar 23, 2023 • 2 min read

In this tutorial, I'm going to show you how-to create your own LinkTree page for listing ways to donate to you, using Bootstrap and a bit of custom HTML and CSS.

HTML

Firstly, we will add the following HTML within the <body> </body> HTML tags.

I would recommend my HTML Template Bootstrap, if you need a HTML Template that incorporates the Bootstrap front-end framework.

<div class="tree">
  <div class="header"><img src="https://pbs.twimg.com/profile_images/1361852374596395012/isM8He5__400x400.jpg"  class="profile-pic" /></div>
  <div class="username">@brandonhimpfen</div>
  <div class="links">
    <a href="https://brandon.tiny.us/patreon" class="btn btn-outline-danger btn-lg btn-block">Join on <strong>Patreon</strong></a>
    <a href="https://brandon.tiny.us/ko-fi" class="btn btn-outline-dark btn-lg btn-block">Buy me a coffee on <strong>Ko-Fi</strong></a>
  </div>
  <div class="crypto">
    <div class="number"><strong>Bitcoin (BTC):</strong> 17GmJoLEjDYkkfMoHpQSvR6Lb7Wt6yvRtV</div>
    <div class="number"><strong>Ethereum (ETH):</strong> 0x690eAD7a7615cf97957571BcFb84997C048a6C27</div>
  </div>
  <div class="footer">
    Copyright &copy; Brandon Himpfen - All Rights Reserved.
  </div>
</div>

You will need to edit the above HTML with your own profile pic, and change the username, crypto addresses and links.

CSS

This tutorial assumes that you have already added the Bootstrap front-end framework to your HTML. If you don't know how-to add Bootstrap to your website, please visit Bootstrap's website, or use my HTML Template Bootstrap.

The following is the custom CSS you should use:

body {
  margin: 4em 2em;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;background-color:#000000;
  background-style:flat;
  background-image:url(https://d1fdloi71mui9q.cloudfront.net/dmf6TpUKQUupYgrWnBRf_tEjp8b55w933r2vU);
}
.tree {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 800px;
}
.tree .username {
  text-transform: uppercase;
  font-weight: 600;
  margin: 2em;
}
.tree .links a {
  margin: 0.75em auto;
}
.tree .number {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
    margin: 0.75em auto;
}
.tree .footer {
  margin: 2rem;
}
.tree .profile-pic {
  width: 150px;
  border-radius: 50%;
  text-align: center;
}
a.btn {
  background-color: #fff;
}