"Sweet numbered instruction list"
Bootstrap 3.3.0 Snippet by johnmillshimself

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="stepz"> <h3> Dental Plan </h3> <ol> <li> Place the head of your toothbrush against your teeth, then tilt the bristle tips to a 45 degree angle against the gum line. Move the brush in small circular movements, several times, on all the surfaces of every tooth. </li> <li> Brush the outer surfaces of each tooth, upper and lower, keeping the bristles angled against the gum line. </li> <li> Use the same method on the inside surfaces of all your teeth. </li> <li> Brush the biting surfaces of the teeth. </li> <li> To clean the inside surfaces of the front teeth, tilt the brush vertically and make several small circular strokes with the front part of the brush. </li> <li> Brushing your tongue will help freshen your breath and clean your mouth by removing bacteria. If you struggle with your brushing technique, ask your dental team to help you find an effective style that works for you. </li> </ol> </div>
.stepz li:hover { background-color: #eee; } .stepz { margin: 0; padding: 0; list-style-type: none; } .stepz li { counter-increment: step-counter; margin-bottom: 10px; list-style-type:none; } .stepz li::before { content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(0,200,200); color: white; font-weight: bold; padding: 3px 8px; border-radius: 3px; }

Related: See More


Questions / Comments: