1tontech / bootstrap4-snippets Goto Github PK
View Code? Open in Web Editor NEWVisual studio extension & Intellij plugin for Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates
License: MIT License
Visual studio extension & Intellij plugin for Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates
License: MIT License
when i try b4-form-file-custom, it didn't show anyting on the screen, only the small text
Hey,
autocompletion for fa5-google-play gives <i class="fas fa-google-play "></i>
back, but it have to be
"<i class="fab fa-google-play "></i>"
The original checkbox and radio code
checkbox
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
radio
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
and it generated
checkbox
<label class="custom-control custom-checkbox">
<input type="checkbox" name="" id="" value="checkedValue" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
radio
<label class="custom-control custom-radio">
<input type="radio" name="" id="" value="checkedValue" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
b4-figure-default is generated incorrectly.
A nice addition to this plugin would be adding a preview of Font Awesome on the tooltip.
I'm referring to something similar to what this https://github.com/Janne252/vscode-fontawesome-auto-complete already does.
Hi
I've installed b4- snippets in my vscode, but they work only in .html / .php files
Is there any way to force them to show/suggest on .js (React) files ?
I've read the package.json and it states the following
{ "language": "javascriptreact", "path": "./snippets.json" }, { "language": "javascript", "path": "./snippets.json" },
so I guess they should show there too, right ?
Any clues? thanks
Could you please help how to setup vscode to enable your base html snippets functionality in *.isml type files.
Thank you.
Hello,
How to set the default indentation of snippets tabs to 4 spaces in vscode?
Thanks
Ever since the upgrade, I've not been able to get the snippets to expand in any project that uses .php or blade.php files. It specifically only works with .html now. Is there a way to fix this? I'm not going to change file types just to use the plugin.
I noticed when creating a range input there is no intellisense for auto-generation. The workaround is to pick b4-form-input-text and make the necessary adjustments. I'll see if I can make a PR.
the snippet suggestions appear in .ts files and it is annoying
When using snippet the button generates like this
<button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block"></button>
it closes quotation marks before btn-lg and btn-block
Using vscode
Currently bs4 snippets is show in quick suggestion list on javascript files.
Is there a way to disable bs4 snippets in javascript files?
When this is installed, intellisense matches snippet tags in reverse. For example, typing "2" anywhere in a php/html file will result in a lookup that matches any of the font awesome snippets such as fa5p-signal-2, fa5p-signal-alt-2. I don't know if this is your code or vscode, but I've yet to see any other extension behave this way for snippets or code completion. This makes typing numbers generate the tool tips every time for no reason. It should only activate when the beginning part of the tag is typed as described. Ex. fa5p-*
Unfortunately, I'd installed this extension as an included pack from "Front-End Professional", so I have to uninstall that entire suite to disable this annoyance.
the official website bootstrap is 4.5 but the snippet is still 4.3, how can I change the CDN in the snippet? or @thekalinga, can you update the extension, please?
Is it possible to change the default template with a specificated CDN URL?
Do this have the flex utilities as shown in the bootstrap document? I can't find it in this plugin.
Do not show hints, such as text-center
The tool is wonderful. But from documentation perspective being a beginner, it would be better if there would be an image how it looks for a particular template. I know its a huge list, but at least some graphical representations
I love the extension for VSCode, though I gotta say I lose quite some time indenting generated code.
As Bootstrap tend to require lots of classes and others attributes, the code becomes a mess, easily. That's why I want to ask for your permission so I can PR a set of indented snippets.
Things like b4-navbar-background
:
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Would become redable snippets like that:
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavId"
aria-controls="collapsibleNavId"
aria-expanded="false"
aria-label="Toggle navigation"></button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdownId"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Unfortunately the extension is overwriting the setting to show Emmet's snippets always on top ("editor.snippetSuggestions": "top"). Also my other Emmet/editor specific settings are correct. It even overwrites "editor.suggest.localityBonus": true, which prioritizes my recently used choices.
I could not find a way, to force your snippets to show up below Emmet's.
It seems a bit connected to issue #18, too aggressive suggestions. A solution for issue #28 (propose font-awesome only when starting with fa) would be a great improvement too.
By starting with cl, I would, of course, like to auto-complete to class="". Instead, there are ~50 font-awesome suggestions before.
It even overwrites "editor.suggest.localityBonus": true, which prioritizes my recently used choices.
Thank you for your nice extension!
I hope this can be solved,
Chris
In Gulp I'd run some command like gulp serve
for running a live reloading server, in web development.
Is there any way to check If my modifications are working properly, on this project?
PS: I've noticed that Gradle is the thing to do it, though I can't figure out how to install and use it to achive what I want.
I just want a code suggestion for b4, No code hints for font ICONS. Thanks for a great god
I've had to disable the extension as it causes me a lot of problems when editing plain text files. Any way to add an option to turn suggestions off based on file type instead of just every file? I'll look at doing a PR for it.
Tab is broken in PHP file when I installed bootstrap4-snippets. I try to disable the plugin, and tab is back. Enabling the plugin again, tab is broken. I am pretty sure tab is broke by the plugin.
You can see someone mention here.
https://stackoverflow.com/questions/24726571/tab-and-enter-key-do-not-work-anymore-in-the-webstorm-editor-while-typing
It seems that the bug exists for a long time since it's still bootstrap3-snippets.
Hello! Great job with this extension, the last version for Boostrap is 4.5, and the version of the cdn links are 4.3, maybe you should update this! greetings!! \w/
Can you update the bootstrap css link as well as the bootstrap javascript and jquery links with the lates bootstrap 4 version when writing the "b4-$" snippet for creating the HTML Bootstrap 4 main template?
How to set the default indentation of snippets tabs to 4 spaces in vscode?
this plugin is not working with the plugin
https://github.com/ronnidc/vscode-nunjucks
@banggua has published this extension in the Open VSX Registry.
The service was recently transferred to the Eclipse Foundation and we want to ensure a seamless transition for our users. To ensure uninterrupted service and more exposure for your extension, I recommend the following.
To the maintainers: If you would like to take over publishing to open-vsx.org, here’s how: https://github.com/eclipse/openvsx/wiki/Publishing-Extensions
To the current publisher: Please sign the Eclipse Publisher Agreement. The signing process is explained in the Wiki (steps 1 and 2).
Claiming ownership of the namespace for your extension(s). To find out how to do this, see:
https://github.com/eclipse/openvsx/wiki/Namespace-Access
As owner you can add more namespace members (including service accounts) yourself in https://open-vsx.org/user-settings/namespaces. Note that publishing can be done by any contributor to the extension, namely those you add as namespace members once they have signed the Publisher Agreement as well.
Please also note that a license is now mandatory for publishing your extension to Open VSX. If your project doesn't have any license, please add one, preferably an open source license such as MIT. The publishing tool ovsx offers to automatically add the MIT license when you try to publish without a license.
Useful links:
Eclipse Publisher Agreement
Eclipse Foundation Open VSX Registry Frequently Asked Questions (FAQ)
More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry
Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. We hope you join us on this journey as we continue to build the Open VSX community.
We look forward to continued innovation from you in 2021!
Hi. Bootstrap v4.2.1 has released. Could you update the plugin? Thanks
b4-button-block
Generate:
<button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block"></button>
extra double quotes.
Hi everyone!
I want to request if it's possible to add classes suggestions for emmet abbreviations.
For example:
navbar.navbar.navbar-expand-lg
then press tab to insert the element navbar
with navbar.navbar-expand-lg
classes
Best regards!
I've noticed that you tried your best to make indentation level at 4 spaces, though there is some places missing this concept. Plus, after this PR of mine, I've realized that I didn't follow this convention.
Said that, I'll be making a PR to fix both our mistakes. Is that OK, with you?
b4-modal-*
Generate:
<h5 class="modal-title">Modal title/h5>
with the h5 tag unclosed, =).
Hello,
is there any way to add missing snippets like toasts or spinners?
Thanks!
Hi,
I do have a small question: Would it be possible to activate this extension on a file that is not an html file?
(I would be interested in activiating this on .ps1 files).
Cheers
using PyCharm latest,
fa5- autocomplete works for icons, however, your options for first class don't work with the latest version of FA.
Your script offers 'fab' and 'fas', when it should be 'fas' and 'far'
thanks!
Why you are using bootstrap 4.3.1? Update to the latest version please and quick.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.