How To Create a Simple Website With Bootstrap 4 | Robin Haney | Skillshare

How To Create a Simple Website With Bootstrap 4

Robin Haney, Web Developer and Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (31m)
    • 1. Introductory To The Course

      0:40
    • 2. How To Set-up and Install Bootstrap 4

      5:47
    • 3. Working With The Bootstrap 4 Jumbotron Component

      7:34
    • 4. How To Add Buttons and Forms

      7:18
    • 5. Adding Our Websites Copyright Information

      2:08
    • 6. Final Touches To Our Website

      7:12

About This Class

In this quick mini course you will learn how to create a simple one page template using the front-end framework Bootstrap 4. This course will teach you how to install and set-up Bootstrap 4 correctly as well as introduce you to the common elements, components and classes you can use to build your website.

This course should take you around 15-20min to go through and build your website. Once you get set-up with Bootstrap 4 you can create a web-page similar to this one in only 5 minutes or so!

I look forward to seeing you in the coruse!


Sincerly,

Robin Haney

Transcripts

1. Introductory To The Course: Hi. My name is Robin. And in this short course, I'm gonna show you how to design a very simple website using the bootstrap for web developing front end framework. Throughout this course, you will learn how to install and work with the bootstrap four framework. This is the final version of the website that we will be building and you will find that you can build this website very quickly. This is gonna take us no more than 15 to 20 minutes to build. And this is assuming you have zero knowledge and bootstrap four. So if you're completely new or you just need a refresher on bootstrapped for in this course is perfect for you. All right, let's get started. Let's build a website with bootstrap for 2. How To Set-up and Install Bootstrap 4: now, before we can actually get started building our website, the very first thing we need to do is install boost up four so that we can use it to start building our website now Bush F or has made this very easy for us to do so. Let's head on over to the boot steps for documentation and look at the different ways that we can install bootstrapped for for our website. So in order to get started with Bootstrap, for the very first thing that we need to do is visit the Bootstrap for Documentation website so we can find the Documentation website by either typing in bootstrapped four into Google and clicking this first link that pops up. Or you can copy the URL at the top here and type that in and you'll get to the bootstrap for documentation. Make sure that you're on the bootstrap for documentation and not the bootstrap few documentation as there is a difference. So the easiest way to get started with Gustav is installed the bootstrap cdn and we can do that by adding these links into our document. So let's start our website. I created a new full to here on my desktop, which were a store or a website files in. Let's start off by creating our A team. L document. Just gonna open up a no pat file here and save it as an index dot html file. There we go. We can delete our old note pad file. I'm also gonna add a folder to store our CSS in. We will be using a little bit of custom CSS at the end of this course to spice up our webpage. So here we have our index file opened in. Our editor we're gonna do here is we're going to install Bootstrap. The easiest way to get right into boost up for its Go back to the documentation and let's click on this starter template. This star template will have everything we need to do to get started with designing websites. With Bootstrap. It will have the bootstrap cdn, all the JavaScript and J query and all the CSS styles that bootstrap needs in order work. We also have a basic HTML template, so that's pretty cool as well. Let's copy all of us to our clip word and let's go to a new index file here and paste in our started template. So this is what your web page should look like when you're done. Let's save the file and open it and just check to make sure that everything is working correctly. Keep in mind when using the bootstrap cdn to hook up, you actually have to be connected to the Internet. And here we can see that the boot stop style is actually are being applied, and boost up is working. Cool. That was easy, right? Before we finish up here, though, there's one more thing I wanted you. I want to actually take a component from bootstrap and just paste some code. And just again to make sure that everything is working correctly with our bootstrap installation, I'm gonna click on components that I'm gonna grab a button here. And this is our a different button styles we have. I'm just gonna copy this code snippet go into each html here, and I'm gonna make a little bit of space down here, just like in delete it. Really? Usually after paste in here Sierra file and if everything is working correctly, we should see a bunch of buttons on our webpage. They're ago awesome. We can see that everything is working correctly. In here is our list of different buttons. So our bootstrap is all hooked up and we're good to go and we are ready to start designing our simple one page of website. Let's go back here and just delete this really quickly since we don't need it anymore. One last thing I'm going to do before you finish up This lesson is we need to hook up our own custom CSS here. So I'm going to copy and paste the code we need to import our CSS and make sure you put your CSS rate off your bootstraps CSS instead. Our custom CSS that we make at the end of this course will override the bootstrap styles. So here we ever a link and we're linking to our CSS style sheet. And in the age, if we have the path to our file folder, which is CSS, and then we have our extra file which we're going to call custom dot CSS. So when this is all good to go, we actually have to make are accustomed out CSS file. So it's give us a quick save go back into our full that we have our website. Once again, we're gonna make a new no pad file. And instead of giving it html, we're going to give it the dot CSS extension couldn't do it. This Oh, no pet file. And let's open up our custom CSS here. And I'm gonna make a simple style change to our each one element. Just a check and make sure that our custom CSS is linked up and everything is working once again correctly. So let's do something like change the color to purple. Make sure you save both your index dot html foul and your CSS file. And if we open up our what page, we can see that our text is now purple. So this means that our custom CSS is linked to r H d html a document and everything is working perfectly. 3. Working With The Bootstrap 4 Jumbotron Component: Now that we have bootstraps set up and working correctly on your Web site, we can start to look at the different components in different features that brooch four can offer to us so that we can easily build our website. All right, so it's time to start building the components of our website. Now, Website isn't gonna evolve too much stuff. And we can actually use one of the people components in Bootstrap to get a good chunk of it started and get our proudest going and on the way. So the actually component that we're going to use is going to the component section here, and we're gonna click on the Jumbotron element. And the Jumbotron element is just nice little box here. That kind of puts an emphasis on a piece of content or something that you want to add a lot of focus, too, on a website and are coming soon. Web page. This is gonna be perfect for what we need it to do. So there's a code snippet of our Jumbotron here, and there's also a fluid jumbotron that'll follow a kind of take over the whole page. But we just want this one here. So where It's gonna copy this code snippet here, go into our HTML file and we're going to stick it, Read in the body section of our website. We can also delete this each one here, since the Jumbotron has an H one already placed inside of it. All right, let's select our record here. And let's hit tab a few times just to give it a little bit of indentation. I'm also going to go ahead and add a little bit of space here between our body. Just so we have some breathing room and where you can easily see what we're working with Your and reader code. All right, that looks pretty good. So let's saver file and see what it looks like on her webpage. All right, we can see your jumbotron unit being displayed here. It looks okay for now, but there's some few changes we need to make. First of all, let's change our text color. Um, we don't want to be purple. We actually wanted to be black, at least for now. We can always change it later. And I'm just going to eat this h one code here and that should fix that up. There we go. That's looking a lot better. Now. One thing I want is I want a center line. All the text in on Jumbotron unit to the center of the page. If you go back to the documentation, you can click on utilities and we can see here. There's a class we can use to align the text of a container or element or anything in bootstrap. And one here is you want this center line we can see here on the second line here we have the text in the center that's left aligned center and then right. We want the one that says center aligned text on all Vieux port sizes. And this is actually gonna be the second paragraph and our code snippet as well. So if we go down to the code snippet here, the second one who's gonna be it's gonna line the text, and we want this text X s center. So this is going to align the text on all Vieux port. So that means mobile devices, tablets or desktop devices. Well, we can take that class and just stick it here and add it to our DIV class for a Jumbotron, and what they should do is align the text on our double trying. And there we go. We can see that detective is now easily aligned on our element. So that was pretty quick, right? Nice and easy. And if we resize the page, we can see here that it's completely mobile, responsive, and everything fits in nice and easily. The next thing we can do for a website is add a little bit of spacing between some of our elements. If you go back to the documentation you can see here in the utility sections, there's a little blurb on spacing, and we can add some margin or patting toe. Are elements using a short code, and that is the one I'm gonna follow here, which we can see. It's dot m t zero. So this stands for margin top of zero. We can also see here that is one for margin left, and there's ones for patting. Fighting left fighting right, And there's different virgins for combining all the different types together, or if you want to do left and right or top and bottom at the same time. But we're just gonna keep it simple and add a little bit of space between our elements with the margin and patting short codes. So let's go back into our HTML and what we can do here is let's add a margin top of let's go with something like two or three. Let's try three. And what this three stands for here is this is going to be realms. So this is gonna add a margin top of three rams to our Jumbotron unit. So if we saved the page, we can see that are Jumbotron is now being pushed down a bit to the center of the page and that it's looking pretty good. We kind of wanted to sit somewhere in the middle. That should be pretty good for us. And we can add these classes to any omen and our page too quickly. Add some spacing without actually working with our CSS. Now, the next thing we're going to do is add a container to our website, our website in particular, we don't really need a container cause it's just a small website and we're not putting very much on the page. But I'm gonna add a container just to show you how it looks and how we can do this with Bootstrap. So this is the two classes types of containers we can have. This is on the documentation. I'm going to copy the first container here. We're not gonna make our container fluid, so I'm just gonna copy this first div class here, and I'm gonna stick it. Probably FP just underneath her body. Take here. So it takes over the whole website. You know, add closing Div as well. At the end of our content, give us a quick save. So all this content here is gonna be nested inside a container. And once I save it and we view the website, you kind of see what I mean with that. So we refresh the page we can see here that are Jumbotron is now nested inside a container that's kind of surrounding the outside of our website. And if we resize it again, we can see that the container resize is with the browser. So if you ever wanted to add a container to your website, which you should when you design more complicated websites, you can use that class toe quickly at a container in Bootstrap. In our case, We don't really need it so much, but it's still nice toe have because tennis centres or content and makes it look really, really nice. So the next thing we're gonna do is we're gonna change some of the text on her page here. Let's change this Hello world and stick a title for our website. After that, this display class here is going to determine the size of her h one. The lower the number the larger detects will be so display three is kind of in the middle. And if I changes to, for example, a one, this is going to make our text a lot larger and on Jumbotron element, if I raise it to a higher number, it's gonna make it smaller. So I refresh the page. We can see that the text is much more larger and has more emphasis on it. And this is great for our website here because we want it to title to be really big and make the visitor really notice it. And it looks really nice as well. So we got the basics of her Jumbotron element configured and set up on a website. Now we can work on adding a sign up form and some buttons to our website and then after that we will finish up styling our website to make it all nice and pretty. 4. How To Add Buttons and Forms: so before we can get started with creamy are sign up form and our buttons for a website. There is a tiny mistake I made and are each one of our document here. I put the bootstrap bro's, but it's actually supposed to say brutes. Bootstrap conference. I don't know why I put rich strapped Rose there if I got that confused with something else . But we'll switched at the conference for now to ah switched up to match our final version of our website. And next up, what we need to do is switch some of the text we have displayed her. I'm gonna go ahead and get rid of this lead class for this paragraph for now. And I'm gonna actually do eat the whole text here and insert our own text here that we want for our website. I'm gonna stick something along the lines of we are currently building out our website or something like that. All right, that looks pretty good. Next up, let's change the paragraph text in the next paragraph again, we're going to add something to tell our visitor to subscribe to our email list, and then they can be identified when our website is live on the Internet. Right? So that looks pretty good. Not too bad. And what else could we do here? I think that's pretty good. I think it's no time to add our buttons to our website for our sand form. So we're gonna do that by going back to the bootstrap documentation, and we're gonna click on a button add ons here because we're gonna use this second button form here. And the first thing we have the button first. And in that, the field that they can type in. And I can't like this. 2nd 1 word says the button afterwards and they're kind of connected together. I think that looks pretty sharp. So I'm gonna grab that snippet here, and I think it's the 2nd 1 right here. So let's find the start of the Tiv gonna copy it. And it looks like there is 123 Debs afterwards, so that should be the whole piece of code right there. Yep. It looks correct. Let's give it a copy. Open up our HTML file and we will paste it in right after our paragraph here. And that should look OK. Give it a quick little selector and indented a little bit. Okay, let's save this file and let's see how it looks on our screen. Okay? We can see her form is not quite align correctly because our but now we had earlier in the Jumbotron is actually pushing it over. So we need to go to the bottom here and delete that button we had here at the very bottom of her HTML page. Yes, this one right here we need to get rid of. So we delete this. Just delete the paragraph tas Well, we don't need that anymore. And if we save it and you're what pitch again, it should look a lot better than it did before Ariel. So our form is now displayed with after our little piece of texture that's telling users describe. And the next thing we need to do is center this form on our kind of in the center of our page, like we did with our text. We can do that by offsetting this column that our search for MSM So once again, let's head back on over to the bootstrap documentation and we're gonna go to I believe it is in layout and grid might be in the grid section. We want to look to see if we can find a section on offsetting columns. Offset. Calm cereal. So this is showing us where we can add these different classes too. Our columns and make them appear in different spots in a web page. And this one right at the bottom here is the one you want, because this is gonna set the calm to show up in the middle section of the page on her desktop view. So this is the class that we want to add. So we're gonna copy and paste that class here. There's a code snippet here. We just need the class name, actually, in our case So we can just copy this here. And if we add it to her form, it's going to center. Align our button type here to be in the center of our webpage on desktop views, and we can actually get rid of that. Keep calling large six, and let's see how that used we might have to adjust or columns a little bit, depending on how it's gonna look in our Web browser. For now, we're just keep it at six to see how it looks, you know, offset it by three. Okay, there we go. We cannot see our for Miss Center eyes in the middle of her page. Pretty cool. Let's adjust the mobile view over website just to make sure it stays in the in the middle. We can see here that it's not quite in the middle. This is probably because we need to add a column class, but it's looking pretty good for the most part, so we need to adjust that really quickly. And let's try changing this column large to four. Try changing our offset as well. This is something you might have to kind of mess around with as you're changing your let's try switch, you know, column large to four and are offset large to four. And there we go. We can see that it's now summarized on her screen, and if we change to move all of you, it adjusts to fit the center of a screen, so it looks pretty good. I'm happy with that, and it looks pretty good before we wrap up this. Listen here. We need to add some spacing in between some of our paragraph omens on her page. So let's go back up here and we have something to change its text here. I'm gonna change it to your email in the email field and in the go button. Let's change that to subscribe. Or actually, it's go get notified. That sounds a little bit better. And as for the spacey never moment, Let's go to our each one here at the top of our webpage. And let's add a margin to push the content below it. Just lower it down to add Lobato breathing room between the H one and the paragraph here. So there's a couple ways we can do this, but I'm just going to go to our H one and I'm gonna add a margin. So let's go margin, be for bottom and let's go to. And let's just see how that looks for now and also an emergent top of three as well, just to add a little bit of space between from the top of the page. So let's see how that looks there. You just move this down a bit and adds a little space between her, each one in her paragraph, and that looks pretty good for now. 5. Adding Our Websites Copyright Information: All right, So what's it is starting to take some shape here. We can see that we're almost complete. We just got to do a few things here. The thing we're going to do in this lesson is actually add our websites copyright information just below our form and the dem Ultron element here. So I'm gonna add a paragraph here, and I'm just going to stick in our copyright information. And in our case, let's pretend that we're linking back to this company's website that they want us to design their website for. So let's stick this in here after we type in. Are you are you are all here? We're gonna add an anchor text right after here and let's put something along the lines of the bootstrap. Breaux's actually, I mean, supposed be pros know. I keep thinking it's pros, but it's the bootstrap prose that it's designing this website. You stick this in the copyright information here, and that should be a clickable link. And let's, uh, try that open. Let's see how that looks on her webpage. Okay, so we can see here. It's right here, and we need a little more space here, so I'm going to actually on the margin here. There's two things we could do. We could stick the paragraph outside of the general trend if or we could just add a margin here and I'm just gonna add a margin since anarchist on our website, it doesn't make that big difference. So I'm gonna go margin top and let's try something along the lines of three rooms, so that should be enough to add enough space so you can see it is actually pushing the paragraph here to the bottom outside of the Jumbotron. But this isn't gonna matter in our websites case, so it's looking pretty good here, and that's pretty much it for our copyright information. We can now begin styling our website even further, and I'm just checking the Mobile Virgin here and all looks pretty good here as well. 6. Final Touches To Our Website: All right, so we're almost done with our bootstrap website here. We just have a few finishing touches to make, and then our website will be complete. So the first thing we need to do is let's make a new folder and let's call it images, and I'm gonna grab my image here and we're tossing in the folder. And if you guys need the image, you can download it in the Donald downloadable section at the start of the course here. I'm gonna have the finished version with the image file inside. So I'm just gonna copy here, and I'm gonna piece it into our image folder. You have to remember that name, background for image and next up, let's go into our HTML and let's open up our custom dot CSS file that we created earlier. We're now going to imply some custom CSS styles that's going to override our bootstraps styles or anything. We want to add extra to our website. We're gonna stick in here as well. The first thing we're gonna do is we're gonna change the background or a website to match the image that I just placed in her image folder. So the first thing we need to do is let's target the body element of her page, and the body element is basically takes up our whole Web page. And let's change the background to that image that we had earlier. So we started itself with the background CSS property. I'm gonna stick. You are all here, and I'm going to declare the file path to our image. So we have images and then background. That JPEG is our file name that are that we want to use for our background. So this will bring up that image that we placed earlier and use it as the background for a website. I also need to make sure I add this Ford slash here before images. Otherwise, it will not work correctly. So let's give this foul saved and let's see if it works. Boom, there we go. We can see that her images now the background for a body. But the problem is a jumbotron kinda has its own background as well. First, I'm also going to put background cover here in our body element, and this is this is going to stretch out our image and make sure it kind of fits the background better, so we'll put background cover in. Our image will change a little bit here when you refresh the page, that looks a little bit better. But we still need to get rid of this background for our Jumbotron element. And we can you that really easily, by creating a class for our Jumbotron targeted in our CSS and we can give it the background value of nut. So, actually, let's put this a jumbotron because that's actually the name John Beltran's Jumbotron. And once again we're gonna go background and then we'll select none. And this will get rid of the background completely and maker element transparent. And we've refresh your page. There we go. We can see here that our whole image background is taking up the whole page and our background pro jumbotron is now gone. But our text isn't very readable here, so we need to change the color of that. And I believe the color we're gonna change it too is white. So we can just go dot jumbotron target the paragraph element inside the Jumbotron and with the CSS color property, we would just stick and white to change the text all to wait. I'm also going to target the Jumbotron H one and we're going to make the color white as well. So let's save this up. You first our page. You see that our text is now all white in our page and looks a lot better. You can actually read it now so that it looks pretty good to add a little bit more style to our website. Let's make this get notified. Button the color of blue cannot match our text at the bottom in our copyright. And they kind of go really nice with the purple background that we have. So we're gonna go to content. We're gonna find the buttons text here, and let's go with this primary button here. So again, looking at the code snippet, we can see that this class is the class of BT n dash primary. That'll change your button to blue. So it's copy that class here, go back to her html and where is our But near we would get rid of this button secondary class and go button primary. Give it a quick safe and that should change our button to blue. Awesome. That looks a lot better in the final version of our web page are back on was actually a lot darker. I'm gonna show you some CS CSS code that we can use to change the Grady int of our background to be either brighter or darker. And this is a really neat command. You can use some pretty cool stuff with it and really enhance the way the images look on your website. So let's go back into our CSS and with our background color property here for our body, we're gonna add the leaner Grady int property to it and I'm just gonna type this out. And then afterwards we will explain how this actual code works and functions. So first we have linear ingredient and then we have rgb A which is basically the transparent e of the background. We're gonna add the next part here for both top and bottom and left and right. And you notice that I gave them a zero value except the last one. I gave it 10.7. This 0.7 is which gonna actually change the the darkness coming to a darker or lighter shade, depending what value pick. So if we give this a quick save and let's just view it and see what this has changed. On our website, we can see that the back on actually went pretty dark here. It's very, very dark. It's a cool effect, but it's almost a little too dark. So what we can do to either make it darker if you like, or if you want to make it brighter, we can go back to this property. We can just change the number if we change it to six instead of 60.7. But this is going to do is gonna make it slightly brighter just a little bit brighter. And that actually looks a lot better. Like the way that looks. It looks pretty cool. And you can customize it however you want. You can change the values to see how it effects, but I think that looks pretty good for our website. In our case, one thing we need to fix up here is Adul over the space between our button. I'm gonna add a margin top of one room to our input group here. This is going a little bit more space between our button and paragraph there, that looks pretty good So there we go. I think our website, it's pretty much complete. Feel free to make any different custom changes you like. But let's do a quick view and check everything to make sure it looks all good. We can see here that our website is fully functional and desktop view as well as a mobile view.