FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Using Bootstrap

Hello, and welcome back to MVC for Designers. In this lesson, I want to give you a high level overview of how to use Bootstrap in your MVC site. And really, it's no different than using Bootstrap anywhere else. But since we're going to be using it in this course, I want to at least give you a brief overview of how to use the Bootstrap grid system. Now, you can learn more about Bootstrap at The full documentation for the Bootstrap framework is there. And within this framework is a very, very handy set of CSS classes that allow us to very easily lay out our content. And you can find information about that grid system is you go to the CSS tab up here on the menu. So, we'll click on CSS, we'll scroll down a little bit until we find the section that says Grid system. Now, the grid system in bootstrap is made up of a 12-column grid. And when we're creating columns for our own site, our columns, or the width of our columns, are going to be defined by how many columns they're going to span of that 12-column grid system. So if we created a column on our site that spanned all 12 columns, then it would cover the entire width of the site. If we created a column, on the other hand, that only spanned six columns, then it would span half of the width of the site. And the classes we're gonna use for that, if we scroll down a little bit we can see an example of that column system, or that grid system in use. We're gonna use these class names that we see here inside these columns. Now there are a couple of options for this middle section. The COL simply stands for column. The MD here stands for median. And the number at the end represents how many columns we want to span of that 12-column system. So if we end this with the number 1, then it's gonna take up one-twelfth of the entire width of your containing area. So when you use this value you can actually put 12 of those columns right next to each other. Now if we go down to this last row here, you'll see this one has a value of COL-md-6. When we use the number 6 here, we're saying that we want this column to span 6 columns of that system, or half the width of our container. And we can see what the HTML for that looks like just below here. So we can see that we have a div with a class of row, and inside each row we're gonna have a number of columns. So our first row here has 12 separate columns, with a class of COL-md-1, which means it's only gonna take up 1 column of the 12-column grid system. So we have 12 of those right next to each other. If we scroll down to the very bottom, we can see our two columns that take up half the width, and they both have a value of COL-md-6. So this middle option here, this md, means that this particular column is going to take up six columns of our grid system at any browser size from medium and up. And I don't wanna get into the specifics of what size is a medium browser, what size is a small browser. Now if you really wanted to know more about those, we can scroll up here and you can see on this grid, on this column right here, this container width, we can see what numbers they're using for the different sizes. But you can use multiple versions, or multiple column classes, for a single column. For example, if you wanted a column to take up only half of the width of its parent element whenever you're using a medium size browser or larger, then you could give it a class of COL-md-6. And then, at a smaller size, anything smaller than that, if you wanted it to take up the whole width, then you would also give it a class of COL-xs-12. And by using both of those classes in your column, you've made your layout more responsive. And I won't go into more detail on that. You can learn a lot more about it by reading through the site and experimenting with it. But once you get used to it, it's actually a pretty simple system. So let's jump back into our files. And right now, we have everything stored in Store02. And I'm gonna make another copy of that, so that we don't save over what we've already done. So I'm gonna copy and paste that folder, and all the new changes from this lesson will be saved in Store03. So I'm gonna go into that Store03 solution in Visual Studio. And let's just throw in a little bit of Bootstrap. So I'm gonna go to our Views folder, I'm gonna open up the Home folder, and we'll open index.cshtml. I'll zoom in a little bit here so we can read that better. And we have our index file here. Let's change our text to Welcome to My Store. And let's put that inside a column. Let's put a little bit more information here for our column set up. So I'm going to create a div here, and we are going to start with a div that has a class of, if we can do this right, container, and inside that container we're gonna have a row. So we're gonna give this a class of row and then inside that row we'll set up our columns. Now let's say we want our h2 here to take up the entire width of the container. So we're gonna give it a class of COL-xs-12. And we'll talk about why I'm using xs instead of md in just a moment. But inside that particular column, we wanna put our h2 tag. Now the obvious way to cut and paste this is to simply highlight the text, cut it, and paste it where we need it. But there's a great shortcut in Visual Studio that I use all the time to move a line of code up and down, and that's the Alt+up and down arrow keys. So if you hold onto Alt and hit the down arrow, we can move this down to where we want it. And then I'll just hit Tab a couple of times to move it over, and we'll get rid of this extra line break here. So now we have our first row, and in that row we have a column with a class of COL-xs-12. Now if we set it to xs and don't include any other column classes with it, then this particular column will span all 12 columns of the grid system, no matter what size your browser is. So from extra small all the way up to extra large, it's going to take up 12 columns of the system, or it's gonna take up the entire width of its container. Now if we wanted to break it up into a smaller column once it gets to a larger browser size, we can do that simply by adding another class. So we can add maybe COL-md-6. So, if we do it this way, then add small and extra small sizes, it would stay at a value of 12, but once it got up to medium and larger, it would jump down to 6 so that it would only take up half of the width. But I just want to leave it at xs 12. Now let's create a couple more columns, just to show you we can. So we'll create another div here. Actually, first let's close this row off. So this row closes off here. Let's create another one. So we'll create another div with a class of row. And then inside that div, we will create a couple of columns. So class equals COL-xs, and this time I'm going to give it a value of 6 so it only takes up half of the width. And then maybe we'll put an h4 here, and in h4 we'll say in column 1, and then we'll put a paragraph here with some lorem ipsum text in it. So then I'm going to do the same thing again, div class equals COL-xs-6. And then we'll do the same thing, we'll create another h4, and we'll call this column 2. And we'll have another paragraph with some lorem ipsum dummy text in there. So let's save our CSHTML file. And then let's test our file by hitting Ctrl+F5. When we hit Ctrl+F5, it rebuilds our project and then displays our home index page in the browser. And we can see that by using those simple CSS Bootstrap classes, we're able to very easily layout our content. And we can put whatever we want inside these columns. For now, we just put some text there. But that's how you can use Bootstrap in MVC. Thank you for watching, and I'll see you in the next lesson.

Back to the top