Linktree using Bootstrap

Create a self-hosted Linktree replica page using the Bootstrap front-end framework.

View Demo | Download Now

HTML

<div class="tree">
  <div class="header"><img src="https://pbs.twimg.com/profile_images/1305903435263488000/3b2Bb0ZT_400x400.jpg"  class="profile-pic" /></div>
  <div class="username">@brandonhimpfen</div>
  <div class="links">
    <a href="" class="btn btn-outline-primary btn-lg btn-block">Visit Our Website</a>
    <a href="" class="btn btn-outline-success btn-lg btn-block">Shop Now and Save 40%</a>
    <a href="" class="btn btn-outline-dark btn-lg btn-block">Learn How-to Build a Website using WordPress</a>
    <a href="" class="btn btn-outline-primary btn-lg btn-block">Check Out Our Weekly Newsletter</a>
    <a href="" class="btn btn-outline-primary btn-lg btn-block">Subscribe to Our YouTube Channel!</a>
  </div>
  <div class="footer">
    Copyright &copy; Brandon Himpfen - All Rights Reserved.
  </div>
</div>

Replace the user image, and add or delete buttons as you wish. Documentation for Bootstrap buttons can be found on Bootstrap's website.

CSS

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 .footer {
  margin: 2rem;
}
.tree .profile-pic {
  width: 150px;
  border-radius: 50%;
  text-align: center;
}
a.btn {
  background-color: #fff;
}

Change the background colour and image to whatever you wish. If you wish to have the buttons a different colour than the background colour or image, please change the colour value for a.btn.

Brandon Himpfen
Blogger. Developer. Designer. Programmer. Photographer. Traveller. Digital Marketer. Gamer.