Intro to Bootstrap in ASP.NET MVC

using c-sharp on the web is a great way to expand your audience however this requires you to learn more than just c-sharp you need to know HTML CSS and JavaScript in order to complete your user interface design in this video I'm gonna get you started by walking you through the basics of bootstrap which is the web framework of choice for both asp.net MVC and dotnet core MVC we will see what it is how to use it and how to make it even better but first if you're new to my channel my name is Tim quarry and it is my goal to make learning c-sharp easier this channel is full of videos explaining the various parts of c-sharp if you like what you see I would love to have you subscribe to a mailing list to get updates on new courses and other c-sharp materials that I offer you can find a link to sign up in the description below along with a blog post link for this video in that blog post you'll find the source code for today's video okay let's get started in Visual Studio I'm gonna start a blank slate here so let's go to file new project and let's create an asp.net web application which is the full dotnet framework if you prefer the dotnet core it'll look a little different but the actual work we're doing today will be the same so let's start by giving it a name we'll call this MVC demo and we'll give it a name as bootstrap demo so the actual solutions we call bootstrap demo that's what we're talking about today but the actual project name will be MVC demo and this is the dotnet framework I am currently using for point seven point two but you can use a previous version again it will still be the same layout I wouldn't go back past about four point five if you don't have all the frameworks you can Google download dotnet framework and will give you the SDK to download the latest versions of the framework I believe that when I installed Visual Studio and updated only updated to four six one I believe but I download the the newer versions to have some a newer c-sharp features and that c-sharp not Visual Studio okay in here we have a few options I'm going to choose MVC and nothing else they were just gonna do the basic template not even authentication just basic template and that's it so wait let's get started once I get started I'm going to walk you through the one plug-in I'm using whenever you work in Visual Studio on web stuff there's a few things are kind of missing in the editor and that's where a guy at Microsoft Mads Christensen has built some some great stuff to add to c-sharp let me show you and bring you a web page up here and this is web essentials 2017 that works for Visual Studio 2017 and what is is actually a list of a number of different extension so here's all the extensions that are includes you don't have to install all of this you can just choose the extensions you want and some ways I encourage that because what can happen is used to install everything you don't know how to use anything but if you start small and just start adding to it your your edit or experience get better and better as you need it to okay so for this video I'm going to be using two of these extensions Zen coding which is down here at the bottom now open that up and then also the browser reload unsafe these are the two we'll be using now Zen coding for whatever reason for me did not install what I installed web essentials for some reason it didn't get the installation and so I had to download this separately and install it just make sure that Zen coding is installed if you decide to install the full web essentials they actually hide it in just a minute but what Zen Kodi allows is it allows for us to use this really great framework where you can kind of shortcut a lot of the commands you'll need so for example down here if you type ul greater than Li times 3 and let's go ahead and zoom this in a bit so you can see a little better so if you take this syntax right here ul greater than Li times 3 what's gonna do is create an unordered list tag and then three of the list item tags and so you can see that's what creates down here and so use that a lot just to speed things up so that's really the reason I want to use it now it's you want to speed things up when you're in development not just on a video and so I think this might be a benefit to you as well the next one is the browser reload on save and what this does is that whenever you hit a Save button it's going to reload the browser if you are currently debugging what they'll do they'll show your latest changes which is really helpful now it's using the built in browser link which is built into Visual Studio and I'll show you that as well but this way without having to hit that browser link button you can see your changes reflected on the page so again a shortcut thing to help me debug faster so those are the tool be using today but I do encourage you read through what these do and see if you can you know even improve the usage of them and then go on to the others as well I am NOT big proponent of just installing these huge massive packs of stuff and then never a learning how to use more than about 5% of them that's when the problems with resharper resharper's a really powerful tool the problem is everything it gets convinced they need resharper and then they use about 5% of what I can do I encourage if you install an extension and I don't advocate that you always install extensions in fact I use a very very few but if you do make sure you learn how to use it so you can get the the value out of it that you need because it is doing things in the background so it's slowing down Visual Studio it's gonna slow down Visual Studio you might as well speed up your coding to exceed what you're slowing down so just a little piece of advice there and we'll come back these others and a little bit I'll pull it off the side but here is our our basic MVC project so let's go ahead and start it just as it is no changes you know point out a couple of those things with the web essentials all right so opens a window when I run this once it loads there we go there is the basic web page okay there's a full screen web page and if we shrink it down it should adjust there you go to being a smaller size so this was built into asp.net MVC it's this the starter page okay what we're going to do is we're going to make some modifications to this in order to change it visually and also to see how we can create new pages or basically do any page in this same style now the first thing I'll show you is let me go ahead and and bring this down I'm gonna shrink it down a little bit I'll then like these if you kind of hard doing one screen but we'll make it work so bring us up here and I will expand this way but I will shrink it up just a bit up here okay so now we can do is I can come down here in the lower right hand corner and go to views home help of the index page now right now I've got this browser link installed running nose it it's checked here enable rely on save and enable browser sync and what that allows me to do is it allows me to do work on this and then save it so let's change this to youtube MVC boot said let's do bootstrap demo and I hit save which is control s now watch up here I'll hit save there you go now it's changed notice I'd have to hit anything else so I can't control s and then keep going so I've seen that my changes are updated automatically on the page which is really helpful the other thing browser sync allows you to do is if you want you can install or enable more than one browser and have two or more open at the same time so if I open up Internet Explorer and let's just let's just do that I don't bring this over and I grab muskegs you know shrink us down a little bit which does change the page but that's okay it's the same page it's just a different layout and I will sure let's enable that and we'll shrink this window and we'll go to the Hat same page there we go so now you have a page in two different browser windows on the Left we have Google Chrome on the right we have Internet Explorer 11 and now if I were to change something let's change this to Tim's YouTube I hit save notice that both of them update okay now this one's bigger than this one so Internet Explorer this bigger just because the window is a little bigger pressuring us down it should shrink down the same size so there you go we can make modifications to the same size but that's how browser sync works and now that I can I can task this if I have you know I have four minors so I could put fullscreen I could have Firefox Internet Explorer and chrome and be making changes on the fly saving all three browsers will update that I can see how it looks and different browsers and make sure that I'm not missing something in one of my major browsers all right so that gets you started with just kind of adding in general let's go ahead and close both of these down and I'll maximize this and let's look at bootstrap itself because that's what are you working on his boot strap so bootstrap is installed it's good content there you go yeah bootstrap it's got bootstrap theme and also bootstrap and then site dot CSS there's also some JavaScript in here as well and you'll find that here bootstrap and bootstrap min JavaScript as well some other stuff as well okay now bootstrap itself is you notice here in the comments of bootstrap Jas is bootstrap version 3.3.4 from the bootstrap it all you'll know that bootstrap is currently in the the major release of version 4 sorry now I believe it's version four point one point three so we're using three point three point seven you may say well as you know as bad and let's not do that the reality is this is what's comes with all the templates this with the templates are built for in asp.net MVC now yes you can't update it that means you have to also update how the template interacts with it and so it's an initial setup work you're gonna do but the other thing is any site that's already been built with MVC most likely is using the version three bootstrap which means upgrade of four is a lot more work it's not just a hit update networks so we're going to use version 3.3 pointed a which I understand something last version but it's that the version I think you will see most off when you're working with these dotnet sites however even if you go aversion for all these same principles will apply it's just that some naming is different and there's some a couple of different things but the foundation you learn today will still help you a lot when it comes to the latest and greatest stuff now let's do some cleanup in our CSS because that's the place we'll concentrate most today as far as making changes now we have bootstrap - theme which is a theme from Microsoft rank it read that so we get rid of all these gonna highlight them and then hit delete and yes I wanna delete them next I want to delete the CSS map through CSS map down here alright so we're gonna hit delete and those are gone as well and the reason I'm doing this is because we make some major changes to bootstrap CSS which means that map file and the min file those aren't going to be valid anymore we'll have to regenerate those and we can do that and actually right-clicking on bootstrap using a third tool from that web pack essentials wicking is bundler and minna fire and just minify that file but for now we're gonna leave it alone the difference between a minified file and a full version file is a full version file allows us to easily read what's here it's very easy to modify it's easy to see what's what is there and get to it make changes the minified version has all the whitespace taken out and consume a lot of compression involved that's when you deploy it to a production site makes a much more smaller file to download for your end users now when you're working with bootstrap I want you to understand how to get help and is a great website built by bootstrap called get bootstrap calm then get bootstrap has all the documentation you need and examples on how to build the various parts of bootstrap the one trick is that currently it's on the 4.1 version notes the upper right hand corner where my mouse is but don't worry if you do is drop down here you can select three point three point seven and see the bootstrap get bootstrap site the documentation based upon bootstrap three point three point seven so that makes things a little easier for you just remember to change that otherwise things won't work as expected because there are some naming changes and other changes from the version 3 to version 4 again another reason why people don't just upgrade to version 4 so if we look here these five sections up here especially CSS and components are gonna be huge for you understanding bootstrap getting started gives us star and how to put bootstrap in what it is and so forth but CSS this is where I spend most of my time because it lays out the various sections and we'll look at this in a little bit components same thing it kind of lays out some some other options for us so if if you learn nothing else in this video go to get bootstrap comm go to the right version and then read this stuff because he just browse through here and go oh I want to learn about progress bars click there there you go there's example code if you copy and pasted this into your site just as it is you'll get this exact progress bar it's that simple so there's a lot here you can learn from and it even tells you all the different things about it so you can kind of read through understand why it is the way it is so that's really helpful in your learning of bootstrap so as make sure you bookmark that site okay so here is how our main index page on our MVC if you notice it says that's my modification therefore the h1 tag and says Tim you to bootstrap down instead of asp.net so this is the HTML this whole section here from line 1 all the way down to line 31 this is the HTML section that lives inside a part of our page not the whole page if we looking over here on the right in our solution Explorer we go down to the shared folder under views and there's an underscore layout dot CSS HTML this is where the rest of our code is in fact you scroll down here you'll notice on line 31 at render body now it's the Razr syntax that at and if you've watched my introduction to asp.net MVC you'll know how that works but this render body right here is essentially going to take this code right here and put it right there if you're calling the index page and that's we all a page where I'll stay on we're ahead go on other pages today we're just gonna concentrate on one page because we're just we're about the front-end user experience with HTML CSS and JavaScript so that right there is where our code is going to go or HTML and so the rest of this code or HTML can also be modified so let's keep that in mind when we're looking to modify things one last thing to point out and that is in app start there is the bundle config and that's where bootstrap CSS and also site dot CSS get bundled together into a style bundle that then gets put on the page of layout we look here there is our on line seven is our render content slash CSS which is content slash CSS right there so that's how we're getting the bootstrap CSS onto the page if we needed to add more CSS files or other files we either put them in a bundle or put them directly onto the layout page all right let's look at our first bootstrap modification and this is a big one I'm going to show you right away because this right here is worth the price of admission for bootstrap in my opinion and that is the grid the grid is amazing so right here on line 11 we have a div now a div if you're not familiar a div defines a section on the page of HTML in a class is one or more things that get applied to our div or any other object and in this case is bringing in some styling with it so styling is that CSS now that's pretty much how bootstrap works for anything you need you want to look for a class that's almost always going to be your solution apply a class or two classes to your object so the grid this class is row and whether defined is one row in our grid and then underneath that we have three divs that have and as last one down here we they have a class called call - MD - for notice all three of them have it and what this defines is columns the grid has 12 columns so in this case we're saying this section right here so this div right here will take up four of the 12 columns meaning it's going to take up a third of the overall space of the row this is another third down here then we have one more now if I were to add a fourth let's go ahead and do that so we just start this up so you can see we're doing and I'll also bring us back down and let's expand this over so it's got a full width I'll bring it back up there we go so this right here is a three sections notice one two and then here's two and then here's three so if I scroll down here on code the first call - MD - four is the has getting started in it and also a paragraph below getting started and then also a button so what if we want to add a fourth section here and we didn't want to have it wrap around let's first try it with just at copying this last section we'll change a couple of the the word be title let's say let's call it tim's column I'll hit save watch up here notice is now below web hosting which isn't right you gotta wonder well why is that let's do one more we'll call it Tim's second column and now it's down there so that's that's ugly that's not what you want why is that well we're exceeding our row remember our row only has 12 columns we got four four four four and four that's too many so let's delete the last one we still have Tim's column so let's change all of these to call - medium - three let's change in the four to a three I hit save there you go now we have four columns see how easy that was all the head do was just make sure that my columns did not exceed 12 total for the row if I want to add a second row let's just minimize this copy it whole row and then I will paste it one more time so it's exact same I hit save now we have two rows of four all right so just something that simple I'm going to get rid of it but just it's something that simple will allow us to create these dynamic columns but you don't have a stop there let's get rid of Tim's column from it and let's just say that we don't like the idea of getting started being just like everybody else so we're gonna say that getting started is actually six Merliah there are two are still three there now you got getting started as being half the total width and the other two take up the other half combined so just play on a rather grid like this we can make some really amazing things without having to worry about CSS layouts and spacing and how does it work on different different sizes because we'll get into this a little bit later but this right now takes up half for I'm sorry this takes up half a section a quarter for this one and this one takes the other quarter but if I were to minimize this let's go ahead and change the width watch what happens there you go now they're stacked and the reason why i stacked is because we said call - MD and so what happens there is there are four breakpoints as far as size inside of bootstrap and so bootstrap has extra small small medium and large and those four breakpoints allow the screen to resize at the various ones so call - MD - six says that at the medium level it's going to take up half a row and so I default anything smaller than medium means it takes up the whole row I could make some changes here so I could say and let's just well got a shrinking back down so you can see it so let's do this I could say that call - MD - 6 but call - lets go large is let's go it's small instead so for small it's gonna be up for it we'll do the same thing with the other two so now we have two different classes applied well this one says 6 and this one says 4 but there are different break points so medium and above it's going to be 6 that's small it'll be 4 columns below small it will be that full whip now if we hit save on this nothing seems to change until you start shrinking it down right there now all three are equal width okay so there's that small if I keep going smaller now they're stacked on top of each other if I say you know what they're small enough so let's go ahead and say that the these are extra small instead of small which means that even the smallest size they will still be 3 columns instead of 3 rows I have save on that and now that I shrink down there's small there's extra small okay so what happens is it's saying this right here says it's maybe four columns wide on extra small since there is no small it still takes the four columns wide but then it hits medium as it's going up the chain it hits mediums it's okay now it's only three wide that hits the large and it says well medium was three wide and don't have a specific or s yeah specifically large therefore I take the mediums version which is still three okay so that's how the grid works and you can really do some fun stuff with this for example let's say that on our let's change it back to four and so we'll change it back to what they were or let's leave it three leave of 3 so we have 3 we have 3 and we have 3 and we're gonna have just four medium and I'm buff so now notice we have you know three equal sections but there's all this white space over here on the right but maybe that's not what you want it may you want to shift this over to the right well we can do is say call - off large I'm sorry call medium got over there force my intellisense which comes I believe this comes with the web essentials call medium offsets and let's do three and what this will do and we just use something the first one is it will shift over three columns before it puts this item okay if I had saved here notice it now shifts or the way space is here which is great but maybe I wanted to have a little space over here and a little over here I could do something like this where I said the medium offset is two and then I come down - I don't have to do anything else actually because the whitespace will be after this and before this now now it's not even because I have an uneven number of columns left over so half do some math there and figure out probably I need to do is change these two twos so two two and two and they have three each side or something similar like that or maybe I just make this one four and make the offset one so now I have four or five eight eleven and one at the end I hit save and now this whole section is perfectly saved perfectly centered and this one has that little bit more space that I want so you can play around of those kinds of things with grid all day long anything inside of this called medium - are three is so you can play with you can add new things and there you can add a ton of things in there you can even add a new row so for example maybe you want to give half the width to this one section and then inside there break that section up into 12 sections and put things into columns so for layout sake this like I said is worth the price of admission because the grid allows you to do things we layout that otherwise take some very complex CSS trying to move things around the page is very very difficult especially when you're trying to move things are on that page but not have them fixed so they only work in one scenario so if you have a mobile client it still looks pretty nice even if it also looks nice on a full desktop that's very hard to do with a grid it's very very easy now the way we used to do things is we used to use tables and sometimes tables are still very very valuable the table in HTML should only really be used for data it shouldn't be used for layout that's why we have the grid so but what if you did have data let's come down here I'm gonna scroll down to the bottom here and down here my code let's create a table now notice I just hit table and tab that's part of Visual Studio but now I'm going to use that Emmet or I'm sorry the Zen coding is what's called in Visual Studio what I'll do is I'm going to create a table head then inside there and create a table row inside there I'm going to create a th x let's just be simple and do three and there we go and one thing I forgot so let's go ahead and control X to cut this for now I forgot to put it inside a row so dot Rho and then dots call - medium - 12 for the full 12 columns notice that creates a div a row class and then inside their div with a class of call - MD - 12 okay inside there I'll paste my table so a table let's create a basic one first soul to save first name and last name and oh let's say email address so the three header rows or hetero so we have the first name column the last name column and the email address column and then inside it didn't create a body for me so let's T body and then inside there T row and inside there TD times 3 so in here let's just create a don't record so Tim quarry and point actually email address to me I am Tim quarry calm let's copy us roll a couple times and now let's change a little bit of data let's do Sarah Smith and Sarah at hotmail.com and then let's do Jane Doe and we'll do Jane ad yahoo.com okay pretty simple stuff notice down here at the bottom I'll hit save and there's my squished tiny little email or table layout that looks ugly right well this is where again bootstrap comes the rescue in the table tag I'm gonna put a class I don't say table that's the name of class I hit save again how's that look okay what's a whole lot cleaner right that's the basic table that comes out of box with bootstrap now we can make it even better let's say you I have border around the whole table for whatever reason I prefer not heya border but let's say you did in that same tat table tag in the class add table bordered wait for it or somebody to tell you a long time as time there we go and now we've got a border around the whole table hopefully you can see that it's a little bit light okay now that's great but sometimes you want to see a striped table and usually what you to do is have to have some kind of math involved or some kind of funky CSS with every other and all the rest not with bootstrap table - striped there you go notice it's a little it's a little darker here it's not overwhelming but it's a good visual when you're looking at it now what if you wanted the road to highlight when you moved over it well again table - and this is hover and now I move my cursor over it notice that it does change color slightly again where I change this theme to make these things change as far as overall color scheme we'll get to it a little bit but for right now it's a subtle difference but it is there and like I said a table really should be reserved for holding actual data the actual table tag so what if this were data where you want to kind of scan through and see if something's important or not well one thing we can do is let's just pretend that for every z'n Smith is important in that TD we can add a class and let's just say danger I'll hit save notice it's now pink now there are a number of color classes inside of bootstrap there's primary info their success warning danger and I'm missing one more and we'll find out in a minute in the documentation because that's where you go to find all this good information but these classes can be applied to various items so in this case I've applied the danger which is usually a red color to the the Smith entry and that kind of pops out but we can also apply it to a row let's just say that Jane Doe was a success class equals success on the the row itself I have save now the whole row is green so it's a very easy way to either highly a sell or highlight a whole row we can even highlight the actual word itself so let's go at look at Tim I am Tim Cory comm and let's change the color the text itself so in a TD class text dot primary and now notice that timid I am Tim quarry is blue that's because we change the text to primary so all these different changes allow us to make color changes without ever specifying it in the style now you met Noah style is but style is when you change CSS for a specific item and then you can't really use it again so if IRSA is style equals background - color and then specify a color let's do dark blue and I hit save now it's dark blue the problem is this CSS only applies to this element and nothing else also I can't make a change that will change this dark blue color to something else a more universal scale I had to come to every page where that is you really want to avoid doing this inline CSS if you can help it it's not reusable if you can get away with it try to do everything just based upon the bootstrap theme itself if you can't do that then you also have this site dot CSS file where you can make your own modifications to any element and that's read make Universal modifications for example modifying the text - danger class to have a different color or something like that you can also modify bootstrap itself if you want and there's ways to rebuild it on your own that's really the outside scope of this video but it is possible just try to avoid that inline style whenever possible alright so now we have we've modified the grade up here which I'm not a big fan of right now I wanna Center I want to have the whole thing so let's just change that real quick so instead of 4 say it's back to six and we'll take that offset off so now I should have six three and three and now it's the full-width no more lines up to our table and doesn't look kind of goofy okay so now we've got this grid we've looked over that we've looked over how lay on a table and make some changes to it now what if and here's a kind of an abstract or an off-the-cuff one-off thing but it's kind of fun let's between the table and this grid let's add a section where I have a pull quote so I have a row and inside there we'll just have a call - MD - 12 and an inside here what I'm going to do is add a block quote then inside this block quote I'm gonna have a paragraph that says the best way to learn C sharp is to practice building projects okay and who said that well that'd be me so I wanna show you this real quick it's a really fun one that that is a neat layout addition I say that and there you go there's a pull quote so you see a little borrow in the left-hand side and the quote and then who said little - is there these are things that just kind of you know make things pop so if you're writing a a blog post that might be a good thing to add in the middle somewhere so it kind of pops out and draws a user I - it's an important piece of information or a cool quote that you found or something like that okay now let's look at another important one which is buttons so this is a button this is a button this is a button and this is a button so if you actually go and look at these let's go look at the bottom button right here learn more under web hosting so those web hosting it's not a button it's actually a anchor tag so normally look a link but in this case it looks like a button how is that well class equals BTN that indicates make this thing look like a button and then it has used a button default that's the sixth one so button - default versus button - warn or another let's just change this to warn just to show you warning it's safe and there you go now it's yellow instead of that clear so you can use an anchor tag instead of an actual button that's helpful if you actually want to go to a link but maybe you don't and so we can do is you can use the actual button tag as well or you can also use the input type so you can say input and it's make sure with any of those three inputs anchor or button make sure you have a class of BTN and then you could adjust it using BTN - for the different colors BTN warning primary and so forth so let's just change this I chose to change the one above it to primary and we'll change the one above it to info if save there you go light blue darker blue and the yellow now what if you wanted to change the sizes of his buttons maybe but that's a really out there bold like you better click on me no problem we also have sizes BTN - large LG hit save now it's bigger maybe we don't want it quite so big may you want even smaller than this which again no problem let's go ahead and change this warning one to bt and - let's make it extra small I had extra small and this one up here will make the the too small be tn - small there you go now you have your largest your small and your extra small buttons so just again you don't have to go a styling you just have to say which size you want for these now let's do something a little bit more I wanna say to advance we that sounds sounds bad but a little more of a combination of things so we have this up here at the top where this is my demo and it says learn more but what if we wanted to have another button which way over here we could do let's just have please in different lines you can kind of see I'm going to put another button now if I just did button class equals BTN and we'll do BTN - let's do success okay so it's being a green button hopefully and we're going to say this is and I'll explain why in a minute large size large layout how about that it's safe there we go so the buttons right next to it and actually it's not even large so let's change that to VTN - large there you go now it matches but still right next to it how'd it get it over the right hand side well that's really easy pull - right again our class there we go so now it's on the right hand side now what this buttons gonna do for me is it's going to be an indicator and what that's indicator is is going to indicate the size of the overall page now remember there's different sizes there's extra small small medium and large right now on the largest size if we were to shrink this down there's medium small and extra small okay and that's based upon the width of the page that's so we could have a good look on both a phone and then also a tablet and then also your your browser so with that in mind how we change this button so it indicates what size of a screen we're currently on we have the option of using a class called visible I'll show it right now visible - LG for large ok so what this means is if you specify visible - large this button is only visible on the large layout let's see that it's gonna shrink it down the buttons going okay it will stay gone the whole way now it's back and the reason is it's useful because sometimes there's things you want to show but only on a certain size screen and above let's say you had that table down below and maybe you have let's say 10 or 15 columns which would only really work on a large screen but for the smallest screen you just want the bare basics what you could do is say these columns are only visible on the largest screen on the largest setting okay and there's a range and that scram believe it's around 1500 pixels or larger so this is really useful for showing or hiding things based upon what screen you're on now what I'm going to do in that copyist button I'm gonna paste it and this time I say it's only visible on medium and I'll say medium layout and let's change the success to warning I'll do it two more times so instead of warning is danger and it's on the small layout let's change it to a capital S and then once more for let's make this one the default and say on extra small it's just a default layout so I hit save on this and now if I shrink down there we go shrink down there's the medium layout notice the is now yellow shrink down again small layout shrink down again there's the extra small layout button so that can be really useful for making sure your site's going to work on the various size devices and making sure you get the best user experience to all users because these small layout screen should not have all the same information as a large layout screen if it does there's me way too much scrolling or it'll be super tiny neither one is an acceptable option now the other thing you could do if you want is you could say it's invisible otherwise known as hidden okay so in this case we could do is we could change all these to hidden and it will have a different effect than maybe you're thinking of at first because unhidden it only hides it on that specific size so if I say this notice extra small small and medium now it's extra small small and large now it's medium large and extra small and then we have small medium and large so what's happening here is is only hiding the one that's specified as hidden so hidden on large all right so you have both options they're either hiding everything except when it specifies it me show on or hiding it only when you're on that specific size personally I find that the visible on is usually less used just in the way I do things I usually hide things on the smallest settings but sometimes you have to go the other way around it's really up to you now you will have a stack of these so if you don't want to be visible on a small or the extra small they'd have to add both hidden extra small and hidden small and those will work for you now let's change these Becket I prefer in this case the visible just because that way it give you a really cool indicator as I shrink down okay let's look at one more kind of important one just because I think you'll use it quite a bit and that's the alert now the alert is not pry the first thing you're thinking of it's not a pop-up instead what it is is it's a indicator on the page that you can then customize so let's put that indicator right above this Jumbotron now notice it says class equals Jumbotron that class is just as this box right here okay so again it's another bootstrap thing this lead right here for the class that makes the font large oops sorry run fine it makes this font large okay so it's larger than the normal paragraph text so h1 is what makes this one so huge that's that's right there and that's just a header 1 which is styled by bootstrap ok back on task let's create up here a alert div and then inside we're gonna have Morgan Stewart um you know what for now we're gonna have just the coloring for it so alert - lets let's say danger okay so it's gonna lurk saying hey something's something's going on we're put as danger I mean that red color just so because normally what you think of the alerts is that something you need to deal with or there's a problem and so make a danger sometimes is just a hey fYI May it's me green or blue in that case but in this case we'll make it red the other thing we need to do is we need to add a role they say this is a alert role an inside here let's add well first we'll just add a message so let's say the server is currently down for maintenance okay that's a important message now let's hit save on this and there you go there's your message right there that says hey the server's down for maintenance let's actually put an extra row here it's gonna break for now there you go it kind of brings it out a little bit that's might not either way I'd do it normally but that works for now so now we can see the server is down for maintenance that's just kind of a little alert that hits various it's at the top of your page now I could move that down I could put the alert right over here or I could put the alert down the very bottom it's up to where I want to put it and that's just wherever I put this code here now it's this alerts gonna stay there forever that might not be what you want maybe you want to see this alert be dismissible just so you know you have informed the user but you don't want to mess up their layout and make it look you know scary so in that case let's add a button up here that says they can close it so inside the alert I'm going to add a button and the type equals of course button and we need to have a class as well and not class BTN the class will be the closed class and we're also going to add the data - dismiss and that's going to be dismissing the alert and then inside here I'm gonna add let's just add just an X for now let's make a lowercase I'll hit save and there we go now in the right-hand side over here we have this X so if I click it it goes away alright so that allowed me to dismiss that that message so now we have a dismissable alert if you don't want dismissible don't put the button in there that's all you have to do so these buttons or these alerts me for anything so again you can make it a primary oops not danger I said primary oops they don't have primary interesting there we go there's a green for success alright and we can also have a warning and there you go and again it's still dismissible so that's kind of a high level overview of the bootstrap things you can do just kind of kind of important ones the ones I think that would be something wouldn't necessarily think of to ask or same thing I've to look for but of course there's a lot more but strap can do now you for we go I want to do a couple more things I want to add better icons because they do have the glyph icons but I prefer font awesome and I think you will too and then also want to change this theme I'm not really thrilled with the the base theme so we're gonna make some changes to this so let's start with the font awesome now if you go to font awesome dot-com all one word awesome calm you get this page right here and then in here we can do is you can download the free version yes they do have a paid version but they also have a free version so you can buy the paid version like I said not something we're going to do instead we're going to a font awesome and we can go down here to start using under the free section now here this allows us to use their CDN which is the content delivery network which allows them to host all the stuff and all we need to do is add this one link to our code in the layout page and we're good to go or we can do is we can download it now I'm going to show you how to download because I think this is pretty self-explanatory you copy this link and then what you do is you come over to and let's expand this for now you come over to your layout dot CSS HTML page and you paste it oh right after the content slash CSS done but I think hosting it yourself might be a little more complicated so I'm gonna show you that and there's is a reason why you might host yourself and one of the reasons that I enjoy is I get better intellisense so hosting font awesome yourself over here click on that and download font awesome from the web I'm gonna open this up once it downloads give us a guy it's 12 mega bytes there we go pull that over here on the screen and this might be a little intimidating because there's a bunch of stuff in here but don't worry all we need is inside the CSS we need all dot CSS that's it and then we also need this whole folder called web fonts so let me open it up I'll do it it's gonna pop up off-screen so he's got to do it real quick I'm gonna pause the video all right so I've got the zip folder on the left and I've got my project on the right so let's just copy us web fonts right here and paste it right in the root of MVC demo and that goes the CSS folder I'm going to copy the CSS I'm going to go into my content folder and paste this as well I'm going to change this to be font awesome dot CSS instead of all and it makes more sense I think and I'm done almost so now I can come back over here but if you notice under content is only two files and that's what they have not brought those other files into the project so let's do that show all the files up here in the top bar now right click on font awesome dot CSS notice that the copy that died gray outline of a file that means it's not in the project so I right-click and say okay I'm still running you can't do it while running so I hit stop there we go not gonna right click and say include in project also down the bottom here should be web fonts that whole folder now right-click and say include in project now it has to be the root because of how the the font awesome looks for those web fonts so you can't put them the same file I don't believe I've tried couple different operations and I found this one works so this is the way I think we'll go forward now with that being said the last thing I need to do is go to bundle config and add in one more CSS after bootstrap doesn't matter but put after bootstrap and say font awesome dot CSS since it's in the same content folder the same path applies now be they add it there I don't have to do anything else it's already brought in everything it needs to and now I can start using font awesome now I will tell you that sometimes when you hit run now I haven't used font awesome yet but sometimes if you hit run you pulls up this page you might not see the font it might not be there at all or something like that and the reason why is because you have to hold down your Shift key and hit the reload button that's me let's cached this page and you really don't want that and see that clear that cache out only happens once in a while but I found on adding things the bundles sometimes that will trigger that cache to still use it old version okay let's use font awesome somewhere let's connect our index dot CSS HTML now leave it maximized for now but let's go over here and let's add something to oh in front of the add a new th actually and let's just say icon and then for every item here were added TD now the font awesome what you do is you create an eye item so it's an eye tag and then you say the class equals and then you start with FA you clue that first and then you add the font awesome icon you'll be able to see which icon you want but how do you know which icons are in this list without scrolling through all of these which is a lot so we can do let's back out this for a minute and I will close out as I tagged and so it creates the closing tag as well notice let's go over to our web page again font awesome and then go back to the beginning and let's either click on these well click on the 1341 it's probably easiest and this takes us to all the icons we can use and there's a lot and they're actually also categorized now notice that the pro has about three times as many icons and the pro isn't that expensive if you do a lot web stuff I would death and recommend purchasing it but if you have it no big deal the free ones will work for you so let's create I like this address card so how do I add that to my code no problem click on it it's gonna show you in different layouts notice the light layout is the pro layout this is the regular layout there's also a solid layout so it's up to you which one you is I prefer the regular layout I will say start using this icon and it's gonna tell us how to do that so you can ignore that if you haven't downloaded but what does tell us is up here at the very top you can see this it says F a are dat then space F a address card so that's the instead of F a which I put red put FA or and save for font awesome regular and then font awesome address card so that's we just copy and paste that if you wanted to but we can come back over to our code and we can say F AR and then FA - address - card and let's just copy that whole thing and paste it for the other two as well let's change these other two to be something else just for fun so we can go back here there we go and let's do an ambulance why not and one more let's do a bell so we can do FA - ambulance and FA - Bell I'm assuming so I can run this now let's just see how it appears on our screen let's maximize a screen and there we go we got to a three this is square right here and his let's zoom in a little bit that square right there indicates that something went wrong and that's probably because we didn't get ambulance quite right so let's go back over to our our thing here and we'll go to the ambulance and see why not it's F a s instead F a our okay we can make that change so let's go over to our whoops not that one let's go over to our file and we'll change this to s we will save it and then go right back over to our page and there's our ambulance so now you have icons you can add those icons anywhere including inside buttons and other items they are very useful very web friendly and you'll see in a lot of places because everyone seems to agree that font awesome is one of the best icon fonts out there okay so let's put this back to the 100% and this is our current layout and look for our bootstrap but maybe we don't like this as much as a different look you want to change them things and that's where a site called boots watch boot SW a TCH com that's what this comes in this is free themes for bootstrap now just make note of that word seam because it's not a it's not a template or a set of different layouts different looks it's just a color scheme essentially so let's look at what makes but either three and free is good so I'm gonna show you free stuff I'm not gonna show you necessarily or make you choose the expensive stuff but if you want the expensive stuff over here in the upper right hand corner wrap bootstrap I highly recommend let's just open that real quick this gives you much more customized templates not just themes and they can do some pretty and you know pretty incredible things for example this is $34 but it really gives you a good looking dashboard relegate and they just modify these pages or take thee but pieces that you like so I doesn't recommend if you want to have a nice-looking start that template is the way to go unless you want to do all the work yourself not this specific one but you can go search them through and there's a number of them here based upon what you're looking for but again we're not going to do expensive you know paid things we're going to do free things and so we're looking at the boots watch page now notice this is for tuned for version four point one point three but don't worry there's also themes for version 3.3.4 if you're under my cursor so I click that it goes 2/3 so if you want to go to the version of bootstrap that's version 3 just go a boots watch comm slash 3 so these are for version 3.3.4 down here there is about what at 15 16 different layouts that you can choose from and you can kind of look and see the preview here you can also click on the preview button if you'd like but let's just choose one of these a night I think we'll choose let's start with Cosmo that seems like a pretty decent theme there's this download button but there's also this drop-down let's click the drop-down and choose bootstrap CSS the only thing is this changes is the CSS so this now opens up a bootstrap CSS page you can either download this or in this case it's got control a to highlight all the text ctrl C to copy it and now I can come over to my and let's actually bring us back to our our smaller size and put up here and bring our visual studio down you can see both at one we're gonna make some changes here I'm gonna come down here in my content folder and open up bootstrap CSS now you could and I probably recommend this you could rename this file something else or save it to disk somewhere else as a backup but what we're gonna do is we're actually gonna overwrite this whole CSS file we're not gonna modify it as in Korea modify that overrides it we're gonna just delete it and start over so select the whole thing all six thousand seven hundred rows and delete it and then we're gonna paste in what we copied from the web know is it's a it's another two thousand rows and hit safe check out our site different huh will more bold on the colors it's a little more stark in some ways it's a little more change of fonts to a different font but overall what did and what it demonstrates for us is that without changing code without changing pages you can change the look of your entire site and so this site it still functions the same way notice if we if we shrink this down a bit that large layout becomes the medium layout different color small and extra small notice is kind of dark color now but it still it so it still functions the same way but it looks different now so that's one option that's it's it's d sense not great it's a little more childish and I think that I would like for a serious page but maybe it's a light page or you just want something that does have some nice contrast to it and it does so that's one option but if we go back to our our page on boots watch left like a cyborg instead so again download bootstrap CSS ctrl a ctrl C then come to our bootstrap CSS file ctrl a delete it all I don't control a control v as in highlighted all and paste which override it just in case I don't get all or something like that happens I don't have duplicate code then try and debug why things aren't working right so paste that in there save it and that's a radical shift to our webpage okay you want a dark theme if your webpage that might be the one so again things pop okay but it is different that large layout is green there's yellow red and there's the gray which is the default so different options here that you can play around with you can also make your own changes you can you could also change just certain things for example maybe you hate this purple you can just make a change to the purple color and change this something else so if you want to get into more detailed things that's where you get into modifying bootstrap itself and there's tools for that that's again beyond this video but if you're just working in the confines of free and easy the rap boost I'm sorry the boots watch page is a great option for giving you some different looks than just the basics that you get from the default bootstrap theme now again if you have a few dollars wrap bootstrap kaam is very very helpful because it allows you for example here's version 3 sites not version 4 and you can say you know what start the lowest price and let's just look through you know if you can spend 8 10 12 dollars you can get some nice-looking themes and layouts ok so that's what I typically do I go with somewhere like rap bootstrap or theme forest or something like that then I grab a template and start from there instead of starting from scratch so there's some options I'll include all these links in the description down below but that's really it for working with the basics of boo strap in asp.net MVC or in in dotnet core MVC we're really in your own just basic page you're gonna have your own web page with no C at C sharp and still use this bootstrap theme the exact same way I hope you enjoyed this video I hope you've learned a lot and I hope that I have enabled you to kind of move forward on tackling some look and feels issues on an MVC site if you have any questions please let me know in the comments down below and if you have any thoughts for other videos you want either email me or post and down the comments below I take all those suggestions at least the ones I can do and I put them into a list the more votes I get for certain ones the quicker they get made alright so that's it thanks for watching and as always I am Tim quarry you [Music]

Channel: IAmTimCorey

Views: 97,118

Rating: 4.9425616 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# training, C# tutorial, iamtimcorey, asp.net mvc, asp.net core, bootstrap theme, mvc bootstrap tutorial, html, css, javascript, .net core theme, .net core bootstrap, asp.net mvc bootstrap tutorial, asp.net mvc bootstrap, asp.net mvc bootstrap templates, asp.net mvc bootstrap layout, asp.net mvc bootstrap table example, bootstrap grid

Id: vRqz_zUiJTw

Length: 78min 46sec (4726 seconds)

Published: Mon Oct 08 2018