Mobile-first Bootstrap 4 UI Kit – Shards

Category: Frameworks , Javascript , Recommended | October 15, 2018
Views Total:753 views
Official Page:Go to website
Last Update:October 15, 2018


Mobile-first Bootstrap 4 UI Kit – Shards


Shards is a free, responsive UI toolkit which helps you create modern, mobile-friendly web apps using Bootstrap 4 framework. Sketch and SCSS files are included.

Elements and components included:

  • Elegant colors.
  • Typography.
  • Material and FontAwesome icon packs.
  • Form Controls.
  • Sliders.
  • Datepickers.
  • Card layout.
  • Buttons.
  • Progress Bars.
  • Modals.
  • Badges.
  • Alerts.
  • Tooltips & Popovers.
  • Navbars.

Basic usage:

Include the ‘shards.min.css’ to your Bootstrap 4 web page and you’re ready to go.

<!-- CSS Dependencies -->
<link rel="stylesheet" href="" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/shards.min.css">
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/shards.js"></script>

Read the full document for more information.


v2.1.0 (10/15/2018)

  • Changed: Custom controls, fixed misalignments.
  • Changed: Form controls misalignments and height adjustments.
  • Added: Support for .text-body and .text-monospace utils.

You Might Be Interested In:

Leave a Reply