LinkTree Clone using Bootstrap

Learn how-to create a LinkTree page clone easily using the Bootstrap front-end framework.

LinkTree, Bootstrap, HTML, CSS, Web Development

LinkTree Clone using Bootstrap


<div class="tree">
  <div class="profile-pic"><svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg></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.


Add Bootstrap and use the following custom CSS code.

.tree {
  margin: 0 auto;
  text-align: center;
.tree .username {
  text-transform: uppercase;
  font-weight: 600;
  margin: 2em;
.tree .links a {
  margin: 0.75em auto;
.tree .footer {
  margin: 2rem;