Bubble Sort is a simple comparison-based sorting algorithm that repeatedly swaps adjacent elements until the array is sorted.

What is the time complexity of Bubble Sort?

Bubble Sort has an average and worst-case time complexity of O(n²), while the best case is O(n) when the array is already sorted and an optimized implementation is used.

Is Bubble Sort stable?

Yes. Bubble Sort is a stable sorting algorithm because equal elements keep their relative order after sorting.

Is Bubble Sort an in-place algorithm?

Yes. Bubble Sort sorts the array in place and only requires O(1) extra memory.

Why should I learn Bubble Sort?

Bubble Sort is one of the easiest sorting algorithms to understand. It helps beginners learn comparisons, swapping, nested loops, and algorithm visualization before moving to more efficient algorithms like Merge Sort or Quick Sort.

Playground Component

Bubble Sort
Visualizer

An interactive Bubble Sort visualization built with HTML, CSS, and JavaScript. Randomize arrays, control animation speed, and watch each comparison and swap step-by-step to understand how Bubble Sort works.

Bubble Sort Visualizer

Copy Code

    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Sort Visualizer</title>

<!-- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> -->

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#090909;
    --panel:#111111;
    --panel2:#171717;
    --gold:#f4c430;
    --gold2:#ffd54d;
    --border:#3a2d08;
    --text:#f5f5f5;
}

body{
    font-family:'Poppins',sans-serif;
    background:
        radial-gradient(circle at top,#1b1606 0%,#090909 35%),
        var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:40px 25px;
}

h1{
    font-size:3rem;
    font-weight:700;
    color:var(--gold);
    margin-bottom:30px;
    text-shadow:0 0 18px rgba(244,196,48,.18);
    letter-spacing:.5px;
}

.controls{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:35px;
}

button{
    min-width:170px;
    padding:15px 22px;
    font-size:17px;
    font-weight:600;
    border-radius:14px;
    border:1px solid #705510;
    background:linear-gradient(180deg,#ffd54d,#e7b817);
    color:#121212;
    cursor:pointer;
    transition:.28s;
    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.35);
}

button:hover{
    transform:translateY(-3px);
    box-shadow:
        0 14px 30px rgba(244,196,48,.22),
        inset 0 1px 0 rgba(255,255,255,.4);
}

button:active{
    transform:scale(.98);
}

#container{
    width:min(94%,1300px);
    height:590px;
    background:linear-gradient(180deg,#121212,#0b0b0b);
    border:1px solid var(--border);
    border-radius:24px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    padding:16px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 35px rgba(244,196,48,.06);
    position:relative;
    overflow:hidden;
}

#container::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:100% 60px;
    opacity:.35;
}

.bar{
    width:12px;
    background:linear-gradient(to top,#b88700,#ffd54d);
    border-radius:4px 4px 0 0;
    transition:
        height linear,
        background .2s linear,
        transform .15s linear;
    box-shadow:0 0 10px rgba(244,196,48,.15);
    z-index:1;
}

@media(max-width:900px){
    h1{
        font-size:2.2rem;
    }

    button{
        min-width:145px;
        font-size:15px;
    }

    #container{
        height:470px;
    }

    .bar{
        width:8px;
        gap:2px;
    }
}
</style>
</head>

<body>

<h1>Bubble Sort Visualizer</h1>

<div class="controls">
    <button onclick="randomize()">Randomize</button>
    <button onclick="bubbleSort()">Sort</button>
    <button id="speedBtn" onclick="toggleSpeed()">Speed: Normal</button>
</div>

<div id="container"></div>

<script>

let sorting = false;

const speedLevels = [
    { name: "Very Slow", delay: 500 },
    { name: "Slow", delay: 120 },
    { name: "Normal", delay: 70 },
    { name: "Fast", delay: 35 },
    { name: "Very Fast", delay: 1 }
];

let speedIndex = 2;
let speed = speedLevels[speedIndex].delay;

const container = document.getElementById("container");

let values=[];

function toggleSpeed() {
    speedIndex++;
    if (speedIndex >= speedLevels.length) speedIndex = 0;
    speed = speedLevels[speedIndex].delay;
    document.getElementById("speedBtn").textContent =
        "Speed: " + speedLevels[speedIndex].name;
}

function createBars(){
    container.innerHTML="";
    values.forEach(v=>{
        const bar=document.createElement("div");
        bar.className="bar";
        bar.style.height=v+"px";
        container.appendChild(bar);
    });
}

function randomize(){
    values=[];
    for(let i=0;i<100;i++){
        values.push(Math.floor(Math.random()*350)+30);
    }
    createBars();
}

function sleep(ms){
    return new Promise(resolve=>setTimeout(resolve,ms));
}

async function bubbleSort(){

    if(sorting) return;
    sorting=true;

    const bars=document.getElementsByClassName("bar");

    for(let i=0;i<values.length-1;i++){

        for(let j=0;j<values.length-i-1;j++){

            bars[j].style.background="#ff3b30";
            bars[j+1].style.background="#ff3b30";
            bars[j].style.transform="scaleY(1.03)";
            bars[j+1].style.transform="scaleY(1.03)";

            await sleep(speed);

            if(values[j]>values[j+1]){

                bars[j].style.background="#ff9800";
                bars[j+1].style.background="#ff9800";

                await sleep(speed);

                [values[j],values[j+1]]=[values[j+1],values[j]];

                bars[j].style.height=values[j]+"px";
                bars[j+1].style.height=values[j+1]+"px";

                await sleep(speed);
            }

            bars[j].style.background="linear-gradient(to top,#b88700,#ffd54d)";
            bars[j+1].style.background="linear-gradient(to top,#b88700,#ffd54d)";
            bars[j].style.transform="scaleY(1)";
            bars[j+1].style.transform="scaleY(1)";
        }

        bars[values.length-1-i].style.background="#39d353";
    }

    bars[0].style.background="#39d353";
    sorting=false;
}

randomize();

</script>

</body>
</html>

About this Component

Bubble Sort is one of the simplest sorting algorithms. It repeatedly compares adjacent elements and swaps them whenever they are in the wrong order. Larger values gradually "bubble" to the end of the array after every pass. This interactive visualization lets you watch every comparison, swap, and completed pass in real time. You can generate a new random array, adjust the animation speed, and observe exactly how Bubble Sort transforms an unsorted list into a sorted one. Although Bubble Sort is rarely used in production because of its O(n²) time complexity, it remains one of the best algorithms for learning sorting fundamentals, nested loops, swapping logic, and algorithm visualization.