Logo

Base Examples

Default label examples.

1 2 5 9 10

                        <span class="label pulse mr-10">
                            <span class="position-relative">1</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse mr-10">
                            <span class="position-relative">2</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse mr-10">
                            <span class="position-relative">5</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse mr-10">
                            <span class="position-relative">9</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse">
                            <span class="position-relative">10</span>
                            <span class="pulse-ring"></span>
                        </span>
                        

Use .pulse-{success|primary|danger|warning|info|dark|white|success}class to have color pulse options.

1 2 5 9 10

                        <span class="label pulse pulse-success mr-10">
                            <span class="position-relative">1</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-danger mr-10">
                            <span class="position-relative">2</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-warning mr-10">
                            <span class="position-relative">5</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-primary mr-10">
                            <span class="position-relative">9</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-info">
                            <span class="position-relative">10</span>
                            <span class="pulse-ring"></span>
                        </span>
                        

Advance Examples

Using with buttons and icons:


                        <a href="#" class="btn btn-icon btn-light-primary pulse pulse-primary mr-5">
                            <i class="flaticon2-bell-5"></i>
                            <span class="pulse-ring"></span>
                        </a>

                        <a href="#" class="btn btn-icon btn-light-success pulse pulse-success mr-5">
                            <i class="flaticon2-protected"></i>
                            <span class="pulse-ring"></span>
                        </a>

                        <a href="#" class="btn btn-icon btn-light-danger pulse pulse-danger mr-5">
                            <i class="flaticon2-information"></i>
                            <span class="pulse-ring"></span>
                        </a>

                        <a href="#" class="btn btn-icon btn-light-warning pulse pulse-warning mr-5">
                            <i class="flaticon2-gear"></i>
                            <span class="pulse-ring"></span>
                        </a>
                        

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%