<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row my-4"> <div class="col-sm-3 bg-warning card"> <h1>Circle</h1> <ul> <li><span class="fa fa-circle"></span>  Item one</li> <li><span class="fa fa-circle"></span>  Item two</li> <li><span class="fa fa-circle"></span>  Item three</li> <li><span class="fa fa-circle"></span>  Item four</li> </ul> </div> <div class="col-sm-3 offset-sm-1 bg-primary card"> <h1>Pins</h1> <ul> <li><span class="fa fa-thumb-tack"></span>  Item one</li> <li><span class="fa fa-thumb-tack"></span>  Item two</li> <li><span class="fa fa-thumb-tack"></span>  Item three</li> <li><span class="fa fa-thumb-tack"></span>  Item four</li> </ul> </div> <div class="col-sm-3 offset-sm-1 bg-success card"> <h1>Hand</h1> <ul> <li><span class="fa fa-hand-o-right"></span>  Item one</li> <li><span class="fa fa-hand-o-right"></span>  Item two</li> <li><span class="fa fa-hand-o-right"></span>  Item three</li> <li><span class="fa fa-hand-o-right"></span>  Item four</li> </ul> </div> </div> <div class="row my-4"> <div class="col-sm-3 bg-info card"> <h1>Star</h1> <ul> <li><span class="fa fa-star"></span>  Item one</li> <li><span class="fa fa-star"></span>  Item two</li> <li><span class="fa fa-star"></span>  Item three</li> <li><span class="fa fa-star"></span>  Item four</li> </ul> </div> <div class="col-sm-3 offset-sm-1 bg-danger card"> <h1>Square</h1> <ul> <li><span class="fa fa-square"></span>  Item one</li> <li><span class="fa fa-square"></span>  Item two</li> <li><span class="fa fa-square"></span>  Item three</li> <li><span class="fa fa-square"></span>  Item four</li> </ul> </div> <div class="col-sm-3 offset-sm-1 bg-dark card"> <h1>Tag</h1> <ul> <li><span class="fa fa-tag"></span>  Item one</li> <li><span class="fa fa-tag"></span>  Item two</li> <li><span class="fa fa-tag"></span>  Item three</li> <li><span class="fa fa-tag"></span>  Item four</li> </ul> </div> </div> <div class="row my-4"> <div class="col-sm-3 bg-success card"> <h1>Dash (Minus)</h1> <ul> <li><span class="fa fa-minus"></span>  Item one</li> <li><span class="fa fa-minus"></span>  Item two</li> <li><span class="fa fa-minus"></span>  Item three</li> <li><span class="fa fa-minus"></span>  Item four</li> </ul> </div> <div class="col-sm-3 offset-sm-1 bg-light card"> <h1>Check</h1> <ul> <li><span class="fa fa-check"></span>  Item one</li> <li><span class="fa fa-check"></span>  Item two</li> <li><span class="fa fa-check"></span>  Item three</li> <li><span class="fa fa-check"></span>  Item four</li> </ul> </div> <div class="col-sm-3 offset-sm-1 bg-warning card"> <h1>Arrow</h1> <ul> <li><span class="fa fa-arrow-right"></span>  Item one</li> <li><span class="fa fa-arrow-right"></span>  Item two</li> <li><span class="fa fa-arrow-right"></span>  Item three</li> <li><span class="fa fa-arrow-right"></span>  Item four</li> </ul> </div> </div> <div class="row my-5"> <h3>Other bullets</h3> <div class="col-sm-12"> <span class="fa fa-square-o"></span>    <span class="fa fa-circle-o"></span>    <span class="fa fa-close"></span>    <span class="fa fa-cog-o"></span>    <span class="fa fa-fighter-jet"></span>    <span class="fa fa-flag"></span>    <span class="fa fa-flag-o"></span>    <span class="fa fa-location-arrow"></span>    </div> </div> </div>

ul{ list-style:none; } .fa,.sm{ font-size:11px !important; }