Bootstrap 4 in 2018 - Free Crash Course of 4.0.0

[Music] hey everyone Gary Simon of course zetro and what do we have here we have version 4.0 point zero we're out of alpha we're out of beta and just four days ago on the 18th of January they released the official version after quite a long time several years in development this bootstrap for was in so I already did a bootstrap for course last year and is free but that was when it was alpha so a lot of stuff has changed since then so I decided I would do a real quick sort of elongated tutorial slash crash course on the basics of getting up in running and using bootstrap for to build a layout which is exactly what we are going to do so just a preface I before we begin there is a complete written version of this tutorial on my website corsets or comm it's linked in the description and one take the first line in the description here on YouTube and this is just for your reference there's going to be code here everything I do is going to follow the flow of this written tutorial here in this video tour tutorial that you're about to watch alright so to get started we are going to I cover integration or you're integrating your bootstrap for alright so I there's a couple ways there's a really quick way and then there's a not so quick way and each has their drawbacks so we want to get started as fast as humanly possible then if you visit get bootstrap comm the docs and we go to introduction we scroll down just a little bit you'll see this starter template section right here oh but real quick before we begin make sure you check out my site course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six pack each month that's now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on alright let's get back to it all you have to do literally to get started is just copy this go to your code editor paste this in say this as an HTML file which it's not yet that's why it's not formatting any type of colors and there you go you get started it includes primarily three different things alright so actually I should say four and that is the bootstrap CSS right here this if you visit this and this is through a CDN in the browser you copy and paste that you'll see this massive minified version of bootstrap it's going to be massive but it includes everything that you would want to use and then down here you have your required JavaScript okay that's all you really need to get up and running with bootstrap however the downside to this of course is the fact that you don't have any sass pre compiling which are pre-processing rather and also you're including the kitchen sink essentially so you can't choose which elements you want and so that means it's going to be large this is ideal for prototyping quick quick projects something like that so we're not going to use that method we're going to use the more robust method where you can customize a lot more thing you have the power of sass and we'll do that by installing boot shop for via the node package manager so this means that you're going to need node J s installed and a check go to your console or command line node - 2 V and you can see I have a version if you don't go to node J S org download the appropriate installer based on your operating system install it with the default settings then reload your contour command line and then you can have access to node an NPM which is the node package manager alright so once you have that let's go ahead make a directory burn call this BS for bootstrap not not the other BS 4 and after it creates it we're going to CD into BS 4 okay so now we're going to use the NPM and NIT command to create a package.json file which simply stores our project dependencies so NPM in it I'm going to add the why flag here and that's just going to give us all the default answers otherwise if you omit that it's going to ask you all these questions prompted that all right so now we're going to use NPM once again to install several different packages as development dependencies so NPM install now instead of just winning install we can just use I same thing all right so gulp that's one of the things we're going to install that's a JavaScript task runner browser sync gulp sass and then save it as a development dependency all three of those packages alright so as this installs right here I again I'm gonna reiterate what those three packages are so gulp is a JavaScript task runner and you're gonna see how that works shortly if you're new to it browser sync automatically refreshes our browser for us upon file changes which is really handy when you're in the process of developing a layouts and then gulp sass enables sass compiling with our project and if you don't know what sass is I really recommend you know because I'm not gonna need to be covering basics of sass here but I really recommend I you know doing a search for a tutorial or a course or something on that okay so I'm just going to pause this until oh wait there it goes it's already finished okay and we're going to use NPM one final time to install a few regular project dependencies so this first three that we created they're only needed for development purposes but these three are going to be needed for actually production purposes so NPM I for install bootstrap obviously we want that we want jQuery and popper ojs and we're just gonna save without the save dev flag so of course we know what bootstrap is that's why you're here jQuery is used by bootstrap and then popper J s is also used by bootstrap and it allows for positioning of popovers and tooltips they used to use to tether an alpha version so that's one of the things that they changed alright so next I if you're using Visual Studio code like I am and most other others are who create these tutorials then you can simply type code in a period and that will launch our Visual Studio code editor here for us automatically so I'm going to position this real quickly yep alright and now I we're going to create the following folders here so it's pretty typical to create like a source folder so SRC and then decided there we're gonna create a few other folders so another one will be like assets another one will be CSS another one will be js4 javascript if we want that and then s CSS for sass okay so inside of our source folder which we're currently in let's create an index.html file alright now let's also we're going to paste the following contents I'm not going to sit here and just type it all out and I'm gonna be Kara life a little bit easier but just to show you what's happening here in the pertinent areas is I we just have some real quick basic HTML happening we have right here fonts I'm using a railway font I didn't very easy to include this from the Google web fonts I am using font awesome for fun awesome icons I just realized are particularly layout throughout this little crash course I don't think I actually use this so we could probably omit that but it's nice to have if you want icons are a bunch of them at least and then also we have our main bootstrap CSS and this gets compiled or we use sass to create this file with gulp and you'll see how that works shortly and then also a custom styles CSS like it gets included after our bootstrap right and then finally down here we have those three JavaScript files that we need okay so let's go ahead and save that and next just before we get to gulp section we're going to hop right into our scss sass folder and we're going to create a style sess CSS file so Styles s CSS is where our custom s CSS is going to go so I'm going to put in V G color this is a variable we'll just call it red and then body background will set to BG color now the reason I'm doing this is you know we're not going to use this but I want to make sure right when we're done with this the gulp process that it is actually you know taking our sass and converting it to regular CSS just kind of like a test alright so now we're going to create and this is the final process by the way of this this integration process we're going to create a gulp file J s and we need to name it gulp file dat Jas and I'm going to paste this in series and again all this stuff is at that written tutorial just just for your reference I'm gonna hit control B to get rid of this sidebar we can see things a little bit better and hit control + so we could see things easier so the first thing we're doing we're creating variables and we're importing the three packages that we're gonna need so gulp browser sync and gulps ass alright next we're going to create let's see here um we're gonna start kind of at the end of this file just so I can explain it a little better any gulp task that's name is default just means we can type in gulp in the command line when we do that and hit enter it's gonna run whatever we specify here so it's gonna run two tasks called js4 javascript and serve all right so the serve task I'm gonna paste right here alright so the task here is named serve this is what this is in relation to and it is also going to pass in sass which is a task that we haven't yet defined we will and all this does here this task is just run launch a localhost 3,000 on port 3000 a server and then it's going to watch I these files right here I'm going to make this a little bit smaller and that's I then in the node modules bootstrap SCSS bootstrap dot SCS a file here it's gonna watch that and as well as source a CSS and any file inside of this folder right here it's gonna watch these okay and then it's going to go up watch any HTML file right now we're only going to be working with index dot HTML throughout this whole thing and it will reload it on change or if we save it that's all that means all right so let's also get our JavaScript task here all right so what's happening here all right so basically we're returning this file right here and you can you can navigate to that file if you want to in the node modules and as well as jQuery and as well as this popery nsj file it's taking those from the node modules folder and it's placing them into the source j/s folder that we created all right and then we have two more let's do our sass right here and basically as the comment suggests it takes either sass compile sass into CSS and auto inject it into the browser so it's looking at golf source it's looking for the bootstrap sass file and also any of our custom sass files like our styles that CSS and it's using the pipe method it's gonna put it's gonna run sass on it sass pre compiling and then it's gonna take that compiled regular CSS and put it into source CSS under the same names right here and then this will reload the browser alright I actually let's see yeah I that was all was I thought there was another task but there's not sweet alright so let's go ahead and save that and let's go ahead if everything is set up correctly then once we run gulp then a browser will load up on localhost 3000 and it should have a red background and it better let's see you know sweet worked all right cool so I'm gonna get this position in here okay awesome awesome awesome awesome so real quickly just so I don't forget let's go ahead and go back to the here let's go back to styles get that out there we don't need that and so by the way if I go back to here we could see it automatically reloads which is the power of browser sync okay so let's go ahead I'm gonna focus on the very first thing that I think would be most relevant so the starting point of your bootstrap for project is almost always going to revolve around let's go ahead and our index.html file it's going to revolve around the grid container so the container class a class of container allows you to horizontally Center your layout alright so we define one right here we'll say div class equals container and we'll put test alright so if I save this alright we'll see we have tests here but what does that even mean let's hit control shift I just here on Chrome to get out the inspector and then I'm gonna click on this little selector and we're gonna click rate or hover around right here you could see that our container is just a fixed width sort of container for our content alright so in the case or this or the scenario in which you wanted 100% fluid layout you would use instead of the container class you would use container - fluid right here okay we're not going to do that we're gonna have a fixed width alright so I the next element out outside of this would be the navbar which is pretty typical you mean yeah you defined your container now you want to have a navigation of some sort maybe your logo and you know the different navigation items on your header portion so one real very important thing about this very quick crash course is the fact that I'm not going to be covering every single element in the documentation maybe just take far too long just to show you just how vast bootstrap 4 is I mean you can look through all of these there's a lot of different things you can do but my goal with this crash course is going to be reverting back and forth with this documentation just to show you how it works that way you can have more power going forward understanding how to use all these things yourself based on the few that we do use so the navbar is gonna be one that we use right here and the way the document by and large the documentation by and large is set up is you have all your different sections here and then on the right hand side you have all these different sections here and they're just quick links where you can get to you know different parts of this page and the different parts of this page they pretty much show you an example of what the HTML and the classes are doing here and they also describe what's happening so it's it's a really thorough documentation so that's great so for the navbar I were gonna say most header navigations they include a company logo so we're gonna go with what is most typical and it's usually left aligned and we're also going to include a navigation that's I right aligned inside of that same area so to do this it's get room rid of tests here what we'll do is we're going to start with a nav class of nav bar nav bar expand large nav bar dark and BG primary ok you're probably wondering where the hell did I get all those classes what do they mean well in the nav bar documentation it'll show you the kitchen sink example right here I mean this is going to show you the full thing whether in terms of what it's capable of producing and this is the example that they show if you go down beyond that it's going start at the absolute bare bones basics like navbar which is the class that we just created an Africa are light and beachy light all that stuff so this is where you're gonna find information on the specific classes that we just use so you always start for a navbar you use the nav element with an app bar class and then for instance this right here and now if bar dark is for color and this is for a background color and so let's continue on if we want a logo it's an a class of nav bar brand href not going anywhere company name all right so again if I save this we're not going to see too much happening we see this that's all we see that's not exactly what we are well--why yet although we do want our logo here it is sweet okay so next after that to actually define a navigation where there's menu items we're gonna put a div class and we'll put oops sorry a collapse class as well as nav bar collapse alright and this is important this stuff is important here for a responsive navigation so ID equals navbar supported content you'll see how that's worked shortly and then we're gonna put in not that we're going to put in a UL class for unordered list of navbar nav and then I'm also going to add ml - auto so it's margin-left:auto that's what pushes it over to the very right in the documentation examples i they have mr auto and and that means you're actually I'll just describe I'll show you real quickly what that does instead of just sitting here talking but it's all about alignment essentially so to create an individual list item we give it an abiding class and then we put a a class of nav link we'll put an HR f2 and then finally home so let's copy this we'll paste it a couple times I hate how that happens and we'll do this so we're gonna have a total of four I'm just gonna shift in tab to get that spacing correct out or about rather and then products and in contact so let's save this real quick and see what it looks like oh great awesome looks horrible let's see what happened okay and I realized that's not showing up simply because this right here should not end until after this div right here so sorry about that but now there and you'd better show up haha what is going up here we go sorry I was freaking out for a second so it's because we are on a smaller viewport this is when a little toggle buttons gonna show up momentarily when we do that markup but there we go we have our home about products in contact showing up real nice and neat right there awesome okay so now what see life it takes for instance to add a drop-down once again all of that stuff will be found in the documentation that it just showed you a little bit ago for navbar but just to show you real quickly what the the drop-down or how to do with drop-down we change let's say we want our products to be a drop-down so the first thing we do is we take nav item we add a drop-down class alright and then we put in a class of nav link and then we put drop-down toggle so we add those two classes of drop-down and then drop down toggle on the actual link we have to give this an ID as well so I'm gonna shrink this a little bit ID is going to be navbar drop down alright and then data Ivan toggle and then we're gonna put Rob down all right so then outside of the actual a but still inside of our list item we're going to put in a div with a class of drop-down menu and then inside of here we're going to put individual anchors so we're going to put drop-down item for the class H ref that's not going anywhere because we have other pages product one now if you're using Visual Studio code you can shift all in the down arrow key just a few times and if you want to put a separator you can do that too this is all from the documentation so drop down divider okay so now we can go ahead and save this and hopefully there are no more hiccups and we'll see we have this little drop down and there we go voila awesome stuff okay so how do we actually make the I'm this little hamburger section show up and make it function here in bootstrap for all right well very simple we're just going to come up here to the top just underneath our our a here and we're going to put in the following mark in and then this is going to be a button and this by default gets hidden on large viewports because this is only supposed to show on smaller ones so this is going to be nav bar toggle for the class type equals button data toggle is going to equal collapse and then data target is going to be equal to the ID of navbar supported content right here so we just copy that and we'll put a number sign here alright and that's it for that and then inside of the button we put a span class of navbar toggler icon and you can put something custom there if you wanted to but that takes care of the appearance of the actual button so if we save this of course we can see it's showing up as it shouldn't but if we save it their theories that grieve we have it showing up and then I have to figure out why that's showing up right here and that's simply because this is supposed to be toggler sorry about that boy I don't usually make that many mistakes all right now it looks better look at that awesome and of course it's responsive okay all right so I let's talk about okay what would be another common section that would fall underneath kind of a navigation here well usually a hero section and when it comes to bootstrap for it's called a Jumbotron okay makes it sound more exciting I guess and so again you know they have a Jumbotron section it's considered a component so if you look at the documentation here you're gonna find everything you want to about the Jumbotron we're gonna use it real quickly so I let's come up underneath our nav our closing nav tag right there so div class equals jumbo tron very simple we're gonna have a h1 with a class of display four and then simple elegant awesome okay and then let's put in a paragraph usually there's like a small subheading so in that case you use P class it goes lead you can find all that in that the typography section of the documentation I'm just gonna use some lorem ipsum text right here so I'm just gonna paste this in if you want to find that and you can go to lip simcom li PS um com after that we can also have let's see here and again you're not you can add whatever you want in this section I mean it's you know it's not something that where you're constrained to whatever the documentation shows we're gonna add it another lead section with a call to action button so class equals BTN of course this is all coming from bootstrap you can find this in the button section BTM primary and beach and large LG rather going nowhere the roll is a button and then we can put in learn more all right so let's save that and see now what our layout looks like see looks pretty good at this point okay sweet all right so let's also talk about one of the most important aspects when it comes to bootstrap for an understanding you know what's going on and that is the grid system so it's based on flex box and if you're wondering no the grid system in bootstrap 4 is not based on the new CSS grid unfortunately now bootstrap board was developed for years and years and they were already dedicated to flat flex box and so many other components and their system relies on structure with Flex box that you know they would take them forever to readapt it to the CSS grid but flex box at this point at least I'm recording it is a safer bet usually because the CSS grid is supported at the time of recording this around 76% of browsers and flex boxes almost at 100% so you can go - can I use com to find out what it currently is that so the grid documentation I for flex box I mean for the grid system rather is very detailed so if you look at it real quick you can see all of these sections I mean they look at all this yeah there's there's a lot to take in of course I am NOT going to be covering everything but I will show you and try to demonstrate the core aspects and fundamentals of how it all works so let's say for instance that we want to have underneath this section or this section right here right run here 3 columns of equal width where we have content in each one of them like they could be features associated with this service whatever all right so to do that just underneath our Jumbotron we're going to start off with a div class of row so when it comes to bootstrap for classes the row class is probably one that you're going to be using most often all right so it defines a actual row like a horizontal row and then when you want call inside of those rows you use div class and call all right now of course you can use a lot of other helpers we'll get to that momentarily but you use call if you just want to be able to have like equal width columns all right so I'm just going to put in one and this is temporary two and three and then I have to fix this of course because I don't know why maybe somebody can chime in like why does it do that so annoying so if I save this and we go back to our project we can see our three columns kind of we have r1 r2 and r3 and in terms of responsiveness we drag this thing in they stay right here I'm going to show you how to make that responsive momentarily now these this just looks stupid obviously so we're gonna have cards in here and a card is something that you can find it in a documentation it's a component and you'll see what it looks like in a second so let's just have a div class of card and sorry it didn't close automatically and inside of it we're gonna have div class equals card body text Center all right and we're gonna have an h5 class of card title again this is all coming from the card component documentation section so we're gonna have our card title here and then we're gonna have a description card text and then some quick text to build up on the card title and then finally a button of some sort so HRF going nowhere in class equals card link because this is a link so another link all right so now if I save this and we see it right here this is a card so it's just like a panel it has padding in there already built into it we use Tech Center just to Center everything and it has this little faint border and it also has a corner radius that's all what card it is so let's just copy this that whole card section paste it there we go being annoying all right and then the same thing right here all right so now it should look like this looks pretty good in my opinion but that doesn't look like all right so let's say let's go ahead and figure out okay how can we create custom sizing what if we don't want equal width for all these what if we want this one to extend further beyond well very simple the grid system is based on 12 columns so we could add a - like that and one through 12 so let's add 6 so now the middle I a card here is gonna take up or the column rather six actual rows and these ones will automatically adapt to fit that pretty awesome alright so we don't want that though we're gonna go ahead and remove this all right and now let's let's focus on being responsive so right now you collapse this nobody wants to read text like that on us on a phone right so how do we fix that all right very simple let's go ahead and we'll focus on the first one so we're right up here where it says call we're gonna change this so we're gonna say call - small s m12 so what that means let me just save that real quick I'm gonna show you what happens right now as you can see we this first one that we adjust we applied that class - or those classes - was I it's assuming all 12 columns and that's true on all the viewports because we we specified it at I small right SM small so if you don't specify a different size for sizes above that like on medium or large it's just going to assume whatever is at the mobile viewport so let's go ahead and add call for medium in up it's gonna assume just four columns because 12 times or divided by four or three which are three columns here is four so let's go back tada so notice we're going from this is medium and larger so it's assuming four and then at small it assumes twelve all twelve of them so that's how that works very very easy we're gonna leave it like that to we'll say for instance that this is a really important one and I'm moving devices we want to you know we'll give it precedence okay and then these down here these aren't actually hard to read they look pretty good at this viewport you if you wanted them all to have the same behavior you would simply copy and paste those classes that we just added on the first column so let's also talk right now because it's relevant about margins and padding here in bootstrap for look how these are just sitting on top of each other looks like garbage doesn't it well we can fix that through adding the margin and padding's system in bootstrap 4 which is actually pretty cool the way they've set it up so let me show you real quickly this is spacing so this is under the spacing section it's going to show you how you would set this up in terms of classes so you first start off the class if you want margin which applies to outside of a element that you're applying it to you use em and then if you want to apply padding you use P which is opposite so that would be inside of an element to add spacing and then after that you put either T for top or padding Tom B for bottom left right X would be on both left and right y would be on top and bottom to add margin or padding and then blank and for classes that set margin and padding on all four sides of the element and then after that on the final step you put a hyphen and then a size zero through five okay so let's go ahead and try that real quickly so we would add on our first card container which is right here we could add margin because we want it to be outside of it bottom and we'll use four so now if we drag this in we have our space awesome all right so let's also talk about working with type here in bootstrap 4 so I want to add a section underneath our cards here that demonstrates just some type and it's going to be two columns and let's define those right now using what we've learned so far so this will come just after this tag right here this closing div is for the container we want everything to be inside of that so we're gonna put in div class equals row and we're going to add some margin here because what I found when I was doing this before recording there is margin issues some of the sections in terms of the the cards on top of it and the section we're about to add there wasn't enough margin so I'm going to put margin top on small we'll say 4 and then margin top on medium 0 so those are classes that you can use and again you can find those all in the documentation for spacing and all that and then so we're going to put in here div class equals a column ok so on small devices we want it to go 12 and then on medium devices we want it to be 8 medium and not brother right so that'll be one column let me just go ahead and copy this and this is going to be our second column here this is gonna be call yeah we're gonna leave that here and then we're gonna change this to 4 not 3 to equal 8 or 12 rather sorry about that and so inside of here we're gonna add to some general type so h3 and important heading and then underneath that we're gonna put a peak class of lead and this is means basically it's a subheading it's it's a little bit larger than regular paragraph text and it's also by default like gray I believe so I'm gonna I'm just gonna paste in what I have from the written tutorial all right and then we're just going to have two paragraphs of text just to illustrate what they look like and they're all lorem ipsum right here right there like that alright so right here I'm just gonna put saft you have will go ahead and remove that momentarily so this is what the the type looks like here and so bootstrap four has a typography section and it's gonna tell you all the stuff that the relevant stuff that you want to know about type issues and stuff it also has a section for utilities and helper classes right here and that's gonna give you the classes that you need for text alignment like if you want to Center your text left right and it's also responsive so if you only want it like text to be centered or on small devices then you would add this so all very handy stuff that I'm not going to cover but just to let you know about its existence all right so let's go ahead and come back here so we have this section here and let's go ahead oh and one thing I wanted to demonstrate let's check take a look at this here on the smaller viewports let's say for instance on you know the smaller viewports we wanted this to be centered how will we do that alright well again I was just showing you those helper classes so right here for this column we would add text small Center and then on medium and larger we want it to be left alright so we go back and if I can find it there we go it's centered and then it's left very very easy stuff so let's all as one final element that I'm going to show you before we get into customization of all this stuff let's go ahead and have a vertical navigation that's another common thing that you may want so inside of that column which is this text let's add in a h3 and we're gonna say margin bottom for that something might discovered I needed to add secondary menu for the title and then our actual menu here our navigation so for a vertical navigation we add UL class of a nav and it's going to be a flex column and we're gonna have nav pills so you can look up all that stuff in the documentation for the nav section which is a component in the documentation and like I'll show you actually what it looks like without nav pills it's just a different way to kind of style it so then we have our list items nav items is similar to the navigation we already defined up top a class equals Naville Inc we can add active just to show what that looks like href going nowhere and then we'll say active let's just copy this and then for this let's remove that I will just put link and this is coming pretty much from the documentation very simple stuff Wow I hate doing that and then we'll have yeah we'll have one more well to say this is what it looks like to be disabled simply add disabled and that's that so if we save this and go back this is our menu all right cool stuff so the pills like if we remove that I wanted to demonstrate real quickly let me go back you can see that's all it is the pills to just give you a background color based on what's active so yeah believe it okay so I got a beer by the way of course this is responsive we can check it out down here there we go awesome alright so I think I've demonstrated enough in terms of you know how to use the documentation for adding elements based on your needs okay so now let's talk about customization in bootstrap for because right now this is cookie cutter it's pretty standard and you're probably going to want to customize the look of this alright so we do all that in the styles sass or the S CSS file that we created so let's go back to that real quick right here and initially we D we put the variable overrides right here at the very top and then we want to import bootstrap sass files okay so what we do that is through import we'll say node modules bootstrap a CSS and bootstrap alright so this will include absolutely everything all the imports and if according to the theming section from which if I bring up right over here and the documentation there's two ways to go about this and let's come down here yeah so this is the first method that we just did and that's that includes everything and then you can just include only what you need and if you include only what you need then these three imports are required and then these are optional so if you want to make custom adjustments to say just the grid then you it just a grid right here alright so hopefully you understand it but to make it simple where it's gonna import everything so now let's talk about some probably the most common desire here and we want to change the theme color here in bootstrap for for our layout so we don't want that blue because everybody's probably using that blue especially the newbies so to get an idea of what you can control like which variables we're gonna go to the node modules bootstrap folder all right Kerry or is it that there we go and we're gonna go into our s CSS folder and we're gonna look at variables s CSS alright so looking at this this is a huge file by the way it's all separated into different sections so the first section is at the top fortunately called color system so we have all of these variables here and say for instance we wanted to change some of the theme colors well all the theme colors are defined right here under the theme colors map alright so we have primary secondary success so we can see that primary is just another variable primary but if we go up and find primary ok geez it's another it's another variable but if we go up and find blue well as I that is the actual blue that's currently on the website and I'll just you know I'll go back real quick that's that blue right here so what if you wanted to change that very simple we'll come here we'll just rear efference theme colors and we put in parentheses and we're going to say primary is now going to become I don't know D nine five seven zero zero okay so let's go ahead and put a semicolon at the end and would save that so now what's gonna happen sweet it becomes this fiery orange type of color very very simple so if you wanted to change more of the default colors based on whatever components that you have here then again you just go back to the variables you see what you can change for secondary success info warning danger light-dark blah blah blah and you specify your custom adjustments right here in your styles and you just put a comma right there and add them it's very simple let's say for instance we want to change the background color well if you just study up enough.i we can find it I know it's here somewhere ah body so the body BG is by default white and we also have a body color here so let's go ahead and take that and let's say we want to change our about our body background color from white let's say to like a light grey so that happens to be let's see here Edie Edie Edie and by the way and just to show you here in Visual Studio code if you hover over to this little section you can change the color with a color picker like that so now if we save this and go back we'll see now we have our gray background very light gray background but it this looks like crap though right because this is also gray it's actually a shade off or whatever for our jumbotron background and so you can also make custom adjustments and so if you wanted to change something specific that you can't figure out how to do with variables or maybe there's no variables for it if we control shift I and we click on the element that we want to change all right we see that it says div clash class rather Jumbotron and it has a current background color if you want to experiment right here in the browser you can do that by clicking this and we'll make it white for instance I like that I think it looks a lot better so we'll just change that div class of jumbotron and if it's already defined you may have to use the important flag so it's called jumbo tron and then inside of here background color and important let's also add like a like I guess you'd say like a shadow at the top it makes it look like the navbar has a shadow just something very very very slight so we'll say border top three pixel solid RGB - nine - and nine - a nine the only reason I'm using that is because I actually that's what you know when you change stuff here it uses RGB here so if we save it now it's going to be white as it refreshes and now we can see if I get rid of this we have that very slight and I'm sure if you can see it you know custom adjustment that we have here so now awesome alright so hopefully that was a decent enough crash course for you to really start getting your feet wet you've learned how to integrate it in terms of just being really quick and just you know using the whole kitchen sink with a CDN but also using in a more robust development environment that enables sass and then also learning how to use this documentation which you know it's huge if there were a proper course done with this it would be hours upon hours to try to cover every single type of element which i think is unnecessary all you need to understand is how to read that bootstrap for documentation here and it's they made it very simple it's not complex and I think going forward if you watch through this whole thing you should be able to achieve almost anything you want I in terms of I you know you bootstrap for theming in creating layouts essentially alright so make sure you check out my site course cetera comm and also of course as always if you liked it subscribe here I'm going to be having a ton more content at least every couple maybe two or three or four days for sure here on YouTube and on the site I'll see you guys later

Channel: DesignCourse

Views: 454,977

Rating: 4.7848935 out of 5

Keywords: bootstrap 4 2018, bootstrap 4 2018 tutorial, bootstrap 4 tutorial, bootstrap 4 course, bootstrap 4 tutorial 2018, learn bootstrap 4, bootstrap 4 themes, bootstrap 4 theming, bootstrap 4 theming tutorial, installing bootstrap 4 tutorial, install bootstrap 4, install bootstrap 4 2018, install bootstrap 4 npm, bootstrap 4 navbar, bootstrap 4 nav, bootstrap 4 nav tutorial, bootstrap 4 guide, bootstrap 4 sass tutorial, bootstrap 4 customizing

Id: hnCmSXCZEpU

Length: 49min 36sec (2976 seconds)

Published: Mon Jan 22 2018