Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:11Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Bootstrap 3 Snippets

Bootstrap has a lot of modules that require heavy markup that’s not easy to remember. In this lesson, I will show you how to speed up your Bootstrap workflow using the Bootstrap 3 Snippets extension.

Related Links

2.3 Bootstrap 3 Snippets

Hello and welcome back. If you're a regular user of Bootstrap and you thought the HTML Snippets plug-in was useful. Then you're really gonna like the Bootstrap 3 Snippets plug-in. So if you're still using Bootstrap 3 instead of the new Bootstrap 4, which is still in alpha, then this will come in very useful for you. And it's very useful for me because I use Bootstrap all the time. So in our Extensions window, I'm just gonna do a search here for Bootstrap. And it should be the first thing that shows up. Bootstrap 3 Snippets, here it is. You'll notice a couple rows down, there is a Bootstrap 4 & Font awesome snippet. So once you upgrade to Bootstrap 4, that will be available for you, as well. But I'm gonna go ahead and click on the Bootstrap 3 snippets. We'll click on Install, and then we will reload. [SOUND] And after the window reloads, it will be ready for us. Now this works very similar to the HTML snippets. You basically just start typing in the snippet you want, and then you can fill it out very, very quickly. So for example, if we wanted to throw in the CDN link to Bootstrap here in the head of our document. We would start typing out the snippet name, which in our case always starts with bs3- and then we can see all of these snippets in the drop-down. So we can see all those available, but we can also keep typing it out. I'm gonna look for cdn and here it is right here. So we have cdn, cdn:css, cdn JavaScript. So, I'm wanna click on cdn and you will notice that it fills out everything that we need. So it has the minified CSS file, jQuery. So it includes jQuery for us. And the Bootstrap minified JavaScript file. Now if you're testing this locally, these aren't going to work right away because of these forward slashes. We would have to go in and finish typing that fully qualified URL out. So we would type in the https:, and then we would paste that here, And here, and it should start working fine. But again, very, very quick, and very easy to do. So if we went into the body of our document, we wanted to create a container for Bootstrap, we just type bs3.container. And it will fill that out for us. So then if we want a row, we would just type bs3-row, it would create a row for us. Now there's another option. If we do bs3-row, that shows up and you'll see that it's row-col, for column. And when we fill that out, it will give us a new div inside the row. And you'll notice that we have a cursor placed in four different places here. So that we can enter in the size of this particular column. So if we want this column to take up one-fourth of the width, we would give it a number of 3. Because 3 is one-fourth of the full width off the 12 column grid system. You can also create columns after you create your row simply by typing bs3-col: and then the width of your column as a number between 1 and 12. So if we want our column to take up half of the width, we would use bs3-col:6 and there we go. And you'll see that it creates it for all sizes, for extra small, small, medium and large. Obviously, you can go in and edit that after it's created, but you get the basic idea. Now if you're used to Zen Coding, then things like this might not save you a lot of time, especially the containers and the rows. I mean those can be created pretty quickly using Zen Coding or HTML snippets or whatever. But there are some really, really useful items we can create here using this Bootstrap snippets plugin. So for example, if we wanted to create a modal. And for my work, I actually do a lot of Bootstrap modals. And they take forever to write. Usually you end up jumping over to the Bootstrap website, copying the basic code for the modal, and then pasting it in your HTML. But this plug-in can save you tons of time because you can just type in bs3-modal. And you'll see that it fills in that entire basic modal structure for you. You still need to go in and obviously fill in the title and the HTML for the body, things like that. But it gives you the basic skeleton for creating a Bootstrap modal very, very quickly. And just that alone is worth installing this plugin if you use modals on a regular basis. So, as always, we can click on our Bootstrap 3 Snippets plugin over here in our Installed Plugins section. And if we scroll down here, you can see a list of all of the snippets that are available for us. So there's a lot of snippets for Bootstrap. Almost anything you can imagine needing to do in Bootstrap, there is a snippet forward here. So again this can save you a lot of time. And this might be one of those areas where the ratings here don't really reflect how useful this can be. It's only three out of five ratings which isn't a terrible rating, but it's not great. I haven't looked into those reviews to see why they used them. Maybe it conflicts with other plug-ins or something like that. But I have actually found this to be very useful and a very nice time saver, when working in Visual Studio Code. So thank you for watching, and I'll see you in the next lesson.

Back to the top