Linktree using Bootstrap

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

View Demo | Download Now


<div class="tree">
  <div class="header"><img src=""  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 class="footer">
    Copyright &copy; Brandon Himpfen - All Rights Reserved.

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


body {
  margin: 4em 2em;
.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.