Bootstrap snippets not updated

[jcc5018]

Hey there, thank you for taking the time to build these snippets. I noticed there are a lot of the component examples still missing.

For the most part, if you use the b4 snippets as a starting block the only change at least in components is adding -bs after data anything (data-bs-toggle, data-bs-dismiss, etc) Thanks

[HansUXdev]

Glad to hear form someone using it. I'm not actually using b4-snippets, everything is from scratch. Also thanks for the tip about adding -bs after data, I'll have to double check that. I think I've finished adding all the component to the extension but they aren't documented yet. I figured in the short-term you can always view them all with b5-. If I missed ones you use a lot, please feel free to list them in this thread.

I'm always open to PR's and happy set up a zoom call to anyone interested in helping to maintaining it. It's surprisingly easy to build snippets like this and I'm happy to walk anyone through it.

That being said, if reading json isn't scary for you here is the compiled json file. This file is compiled from all the separate json files in the types folder and by running the command, npm run concat or node test.js.

Below is what that card snippet currently has. Note that "prefix" is what is used for the snippet completion and inside the body array we have our html with some light regex to escape strings, work with vscode api (example -> ${5|card subtite, |} ), etc.

{
    "Bootstrap 5 Card": {
        "prefix": "b5-card",
        "body": [
            "<div class=\"card\" style=\"width:${1|18rem;, |}\">",
            "  <img src=\"${2|https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60, |}\" class=\"card-img-top\" alt=\"...\">",
            "  <div class=\"card-body\">",
            "    <h5 class=\"card-title\">${3|Card title, |}</h5>",
            "    <h6 class=\"card-subtitle ${4|mb-2 text-muted, |} \">${5|Card subtitle, |}</h6>",
            "    <p class=\"card-text\">${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}</p>",
            "    b5${0}",
            "  </div>",
            "</div>"
        ],
        "description": "Bootstrap 5 Card"
    }
}

I've been hesitant to work on this lately because I'm trying to get a major PR into the npm starter template , building a lightweight "fullstack" template with authentication, signup, login, etc, updating the build process for everything and finally, looking into adding turning this extension into a CLI similar to Create React App .