Skip to main content Skip to docs navigation
View on GitHub

Social links

Display a list of social media links

On this page

Examples

With labels

html 
<ul class="social-links social-links-lg">
  <li>
    <a href="#" class="social-link">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#instagram"/>
</svg>

</span>
      <span class="social-link-label">Instagram</span>
    </a>
  </li>
  <li>
    <a href="#" class="social-link">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#facebook"/>
</svg>

</span>
      <span class="social-link-label">Facebook</span>
    </a>
  </li>
  <li>
    <a href="#" class="social-link">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#tiktok"/>
</svg>

</span>
      <span class="social-link-label">TikTok</span>
    </a>
  </li>
  <li>
    <a href="#" class="social-link">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#youtube"/>
</svg>

</span>
      <span class="social-link-label">YouTube</span>
    </a>
  </li>
</ul>

With tooltips

html 
<ul class="social-links">
  <li>
    <a href="#" class="social-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Instagram">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#instagram"/>
</svg>

</span>
      <span class="visually-hidden">Instagram</span>
    </a>
  </li>
  <li>
    <a href="#" class="social-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Facebook">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#facebook"/>
</svg>

</span>
      <span class="visually-hidden">Facebook</span>
    </a>
  </li>
  <li>
    <a href="#" class="social-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="TikTok">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#tiktok"/>
</svg>

</span>
      <span class="visually-hidden">TikTok</span>
    </a>
  </li>
  <li>
    <a href="#" class="social-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="YouTube">
      <span class="social-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#youtube"/>
</svg>

</span>
      <span class="visually-hidden">YouTube</span>
    </a>
  </li>
</ul>

CSS

Variables

src/scss/_social-links.scss 
--#{$prefix}social-links-gap: #{$social-links-gap};
--#{$prefix}social-link-icon-bg: #{$social-link-icon-bg};
--#{$prefix}social-link-icon-color: #{$social-link-icon-color};
--#{$prefix}social-link-icon-border-style: #{$social-link-icon-border-style};
--#{$prefix}social-link-icon-border-width: #{$social-link-icon-border-width};
--#{$prefix}social-link-icon-border-color: #{$social-link-icon-border-color};
--#{$prefix}social-link-icon-border-radius: #{$social-link-icon-border-radius};
--#{$prefix}social-link-icon-font-size: #{$social-link-icon-font-size};
--#{$prefix}social-link-icon-width: #{$social-link-icon-width};
--#{$prefix}social-link-icon-height: #{$social-link-icon-height};
--#{$prefix}social-link-icon-hover-bg: #{$social-link-icon-hover-bg};
--#{$prefix}social-link-icon-hover-color: #{$social-link-icon-hover-color};
--#{$prefix}social-link-icon-hover-border-color: #{$social-link-icon-hover-border-color};
--#{$prefix}social-link-label-color: #{$social-link-label-color};
--#{$prefix}social-link-label-hover-color: #{$social-link-label-hover-color};
--#{$prefix}social-link-label-font-size: #{$social-link-label-font-size};

Sass variables

src/scss/_variables.scss 
$social-links-gap: .5rem;
$social-links-gap-lg: 1.5rem;
$social-link-icon-bg: $primary;
$social-link-icon-color: #fff;
$social-link-icon-border-style: null;
$social-link-icon-border-width: null;
$social-link-icon-border-color: null;
$social-link-icon-border-radius: 50%;
$social-link-icon-font-size: 1rem;
$social-link-icon-font-size-lg: 1.5rem;
$social-link-icon-width: 2em;
$social-link-icon-width-lg: 2em;
$social-link-icon-height: $social-link-icon-width;
$social-link-icon-height-lg: $social-link-icon-width-lg;
$social-link-icon-hover-bg: mix(#000, $social-link-icon-bg, 15%);
$social-link-icon-hover-color: #fff;
$social-link-icon-hover-border-color: null;
$social-link-icon-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$social-link-label-color: var(--#{$prefix}body-color);
$social-link-label-hover-color: var(--#{$prefix}body-color);
$social-link-label-font-size: var(--#{$prefix}body-font-size);
$social-link-label-transition: color .15s ease-in-out;