Learn Bootstrap in less than 20 minutes - Responsive Website Tutorial

what's up everybody today I'm going to show you how to get started with Busch mop v5 alpha in less than 20 minutes as you might know bootstrap is one of the popular open source CSS frameworks out there that allows us to build fast responsive sites although today's tutorial is just an introduction to get you started I will be looking to develop a follow-on website using bootstrap so if you are interested please consider subscribing so much I not smile the like on this video comment below if you have any questions and now let's not waste any more time let's jump on our computer and get started welcome everybody let's get started by looking at what bootstrap is and Bishop is basically a free open-source CSS framework that allows us to build fast responsive sites it contains CSS and optionally JavaScript based design templates for typography buttons forms navigation and other interface components one of the big changes in the latest version of bootstrap v5 which is still enough by the way is that it no longer depends on jQuery to get started with the latest version of bootstrap go to v5 dot get boost Rob calm and click get started now the two ways of getting started the quick way is using the bootstrap CDN which we can include the CSS and the J's files into a project and the other way is by downloading the source files of bushropp and then including them into your project today I'm going to show you how to use the bootstrap CDN so let's scroll down to CSS and JavaScript I'm going to copy the style sheet here and I've already created an HTML file which of code index dot HTML and to make the stylesheet work we need to paste here under the title just like this let's go back now let's copy the JavaScript files which will allow or components to function go back and the JavaScript files need to be pasted here at the bottom just on top of the body just like this let's line them better unsafe now before we get started with bootstrap we need to have a look at containers containers - the most basic layout and I meant in bootstrap and they are required when using the default grid system so to get started we can create a div with the class name of container just like this and let's just write something like hello save this let's go back to the page and as you can see or text has moved to the right side here this is because the container if we inspect elements you will see that the container as the food has a max width of 1 3 to 0 pixels and if I hover over it you see that the container is actually aligned in the middle of page now you might be wondering well what if I want my layout to be fullscreen what you can do is go back and inside here we can just the - fluid save this go back to the page and as you can see now container is full width and as a default we do have some padding to the left and right which can be reset so let me remove the fluid bit okay let's now explore how we can use the bootstrap grid which is based on flex box so first of all let's create a wrong and inside this role we can create two or more columns if you wish so let's start with C and let's call this one cone 1 + duplicate this one more time and call this one cow click save this go back to the browser and as you can see Co one is taking 50% of the available space of all rapper and co 2 is taking the other 50% of the available space on one rapper the grid is actually based on 12 columns and we can target individual breakpoints by doing the following shortcut so for example if you wanted to start with small let's say Co small and everything above this let's set the first one to be to take 4 columns of the available 12 and on the second one let's do smoke again and let's say I want the second one to take eight columns of the available 12 so 8 plus 4 12 let's save this and let's have a look at what happens as you can see this is now if we inspect this and let's trigger the Flex guidelines just like this you can trigger it in Firefox and as you can see Co one is now taking four spaces and codes and code su is taking 8 if I toggle the responsive design mode and shrink this down on everything above small screens is stay the same but if I was to go under 576 pixels which is below small you will see that they are stacking and each other just like rosewood so for example if you wanted the first column to take 12 on small screens and the second one to take small screens we can simply change the number to 12 year and 12 and everything above small will now take 12 columns which will make them into rows but let's say you want to target big screens like the medium screens and above we can simply go back and inside here we can become - medium screens and then - maybe let's equally spaced them so this one will take 6 columns and let's do the same this one code - middle and everything above 6 is well save this and as you can see now the middle screens and above maybe four like tablets and laptops they are now taking six columns and if you go up there taking 6 columns and if we go down you will see that they then stuck on small and below small again they stack and each other ok let's now add another breakpoint and let's make this one's slightly smaller and this one's slightly bigger to do this we can simply the count - large and then let's say we want to set this to 3 columns and lets the co - large-eyed let's set this one trait which perfect them equal 10 this also means that they're not equals 12 well you can do that they don't have to add up to 12 it's not a problem at all so let's save this go back and see what happens so first of all this one is taken now to on large screens and this is taking 8 on large screens as well and the available space is marked in here and it's just empty let's now have a look at how we can change the order of those sermons so let's copy this quickly paste in here and let's maybe do 6 & 6 on small and everything above and let's get rid of the rest just like this save this as a default as you can see we have caught one and code two both taking the same amount of space and let me just trigger the flags on the bottom element so we can see what if we wanted to swap the column 1 and column 2 for example on medium screens while we can do this very easily with the older CSS property so we can the older and then we can target the individual screen so in this case let's target medium screens and let's say I want the order of the first column to be second and I want order of the second column here to be first let's save this and see what happens so at the moment we are on small screens but if we trigger medium screens just by going up slightly you will see that column 2 is now taking first place and column 1 is now taking the second place and this is how we can target individual breakpoints maybe we want to swap the order on all screens we could simply just do all the - you know the one just like this save it and as you can see column is now always going to be in the first position even if you go on very small screens we have two and one and if you go up it would stay the same but let's say if you wanted to target small screens we can then do simply small small and everything above small will be now the same column T will be the first position and column one move the second position but if we go below small you will see that column one is in its real position and column two is taking the position of Tim let's now go up and let's have a look at some offsetting so let's quickly copy this role in here let's remove the order for now so it doesn't get confusing and let's say we wanted both columns to be equals four just like this let me toggle the flags on the latest on the last live here so we can see just like this and as you can see there is some available space now but what if you wanted to offset the first column maybe with three spaces we can do simply offset - - and this should simply offset this div with two spaces on the left as you can see like so and we can do the same for this one we can maybe offset this by 1 and this should push the second column with a little bit of space in the middle or setting can be very useful to align items from time to time but I want to spend more time on the alignment of the elements and let's have a look at how we can do that so if you're familiar with flexbox this should be very easy for you to understand and let's copy another row and by the way you don't have to always have two columns so you can obviously have more columns than this so let's remove this and this one is well let's remove the order and to make this look better visually we can actually create a div inside here so div with the class name and let's add some utilities for example if you want to add padding you would do something like this pardon - let's say 3 3 the number of the padding that we want but obviously this is based on ramps so it's not gonna be free pictures and then let's add some border and maybe let's add a background color or light and inside this div we can add all text just like this let's copy this at the bottom just like this and say let's have a look at what we get now let me close the Flex and as you can see we have column 1 and column 2 with nice background color and a little bit of order and this will help us to see how the alignment of those elements will work now first of all I want to add a little bit of height so we can start positioning those elements the way we want let's add a custom class name to this row and maybe we can call this one by - custom drop and let's add some custom stars inside here just like this unless did Marcus tomorrow unfold my custom row let's add a background color so we can see a little bit better and I want this color I hope it will be easy to see and then let's add some height so I want right around 400 pixels now if you're familiar with flexbox the alignment is actually very easy to do let's say we wanted to align those two columns in the middle of our page and to do this it's actually fairly simple what we can do is justified - content - Center save this go back and as you can see or two columns and now in the middle of the screen let's say we wanted those two columns to be actually aligned in the middle of this box we can simply the align items Santa say this and as you can see we now have both of the columns aligned to the middle and we can do similar things with this so for example we can do start which is the default which will be here on the left side then we can do end which you'll probably guess this will be the end here and we can do exactly the same thing with the alignment the alignment of the items we can do start which is usually by default at the top and then we can do end which is gonna be at the bottom yeah we can also do the same thing for the actual elements by doing a line self and then the alignment for example start Center oh and one thing that I almost forgot to cover is the justify content around justified content between unjustified content evenly so at the moment we have justified content Center and allowing item Center which has the boxes right in the middle of this Dave so let me show you how the other ones work so in here justify content Center let's do justify content around instead save this this should now distribute the items evenly with equal space around them not if we try counting between save this one with the space between the items are evenly distributed in line first item is always at the start of the line and the last item is always at the end of the line let's now have a look at the evenly and as you may have guessed this space the items let's not go back to justify center another thing that I wanted to show you is how we cannot get this lets Center align them again so they look better just like this and if you wanted to get this basically the gaps between the column content created by horizontal pallet so let me show you how you can do this simply on the row we can put G X which is the class that can be used for horizontal goodies and we can simply put a number so if we save this you should be able to see that there is a lot more space than needs to be and if I remove the github from here you will see that the hopefully go down as you saw that gets a went down and if i refresh think it goes up so this is how he candy so this is how you can change the gutters now that you know the basics let's have a look at some components quickly first of all if you go back to the bootstrap documentation and click on components you will see all sorts of useful components here and let's have a look at a simple one maybe the buttons so this is how you'd normally add the buttons you do button type 'button and then you are a class of button and then to change the color usually the button and then - the color name which is usually written primary secondary success danger warning info light dark and so on so let's copy maybe the primary one can't have a look at how it works and for this I'm going to create another one maybe less great freakos this time come and our page the button in the first one and then let's copy these three times and then we can maybe do secondary here secondary and then maybe we can do danger let's like this go back and as you can see this is how easy it is to add some of the components and there is a lot more that you can use such as card cutter cells drop-down lists grips modal's popovers and so on let's say we wanted to add a component that requires JavaScript so for example one will be modal so if you scroll down they give you a lot of examples that you can use and I'm going to use this one here so let's copy the button that will trigger the model just like this and I'm going to replace this primary button that we had earlier just like this that's right here in the middle save this and let's go back and copy the rest of the middle this will be the actual pop-up so let's copy this and I'm going to copy and paste this outside or container here just like this save this and go back to the page so if we click on this lunch demo model this will show the pop up for us and if I click anywhere outside it this usually closes there which is nice if I click back on it again we can either press this button to close it or we can press the X to close it and obviously we and obviously if we press Save Changes nothin is happening now and obviously we need to add some more logic to make this work another thing that you might want to have a look at is the utilities for example borders is pretty cool you can add borders by the embroider top border right for the bottom and so on you can have a look at some of the colors here and so on so that's everything from this quick introduction of built wrap please consider subscribing to my channel for more videos just like this as always my name is ready and you're watching my channel randy Leibrandt and I will see you in the next video

Channel: RaddyTheBrand

Views: 202,390

Keywords: bootstrap, responsive, web, design, html, css, programming, tutorial, mobile, screen, desktop, window, rwd, responsive web design, css framework, get started, learn

Id: eow125xV5-c

Length: 18min 39sec (1119 seconds)

Published: Wed Jun 24 2020