→ Anonymous
→ Typewriter Effect

Typewriter Effect

This bootstrap css example is contributed by Anonymous, on 18-Jul-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Widget

Author Anonymous

953

v.4.6

Fork Fullscreen

<style>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }

.typewriter {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
    }

.cursor {
        display: inline-block;
        width: 3px;
        background-color: #333;
        animation: blink 0.7s infinite;
        margin-left: 5px;
    }

@keyframes blink {
        0% {
            opacity: 1;
        }

50% {
            opacity: 0;
        }

100% {
            opacity: 1;
        }
    }
</style>

<div class="typewriter">
    <span id="text"></span><span class="cursor">&nbsp;</span>
</div>

<script>
    const text = "Welcome to the typewriter effect!";
        const speed = 100; // milliseconds per character
        let i = 0;

function typeWriter() {
            if (i < text.length) {
                document.getElementById("text").innerHTML += text.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
        }

window.onload = typeWriter;
</script>

More Examples

Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

682

v.5.3
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

4 months ago

916

v.5.3
Calender

Author:
Anonymous

9 months ago

585

v.4.6
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

4 months ago

1.4k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

9 months ago

2.6k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

7 months ago

3.8k

v.5.3
Audio player with bootstrap

Author:
Arturo

4 months ago

1.4k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

9 months ago

5.7k

v.5.3
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

9 months ago

4.3k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

755

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

9 months ago

6.5k

v.5.3
Timer with bootstrap

Author:
Anonymous

3 months ago

968

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2025 BootstrapExamples. All Rights Reserved.

v1.3