Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:6Length:1.4 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Setting Things Up

In this first part, you’ll learn how to get things up and running with Bootstrap, after which we’ll concentrate on the first two components: navbar and hero. Let’s begin.

2.1 Setting Things Up

So I have a blank page set up right here. And I'm gonna be using my code editor of choice, which is VS Code, Visual Studio Code. If you want to follow along, you can do so. We're not gonna use any kind of SAS or any kind of complex techniques to demonstrate this, since then we'll just go with pure CSS and we'll do things as simply as possible so everyone can follow along. So, you can either use a code editor like I'm doing, or maybe you will prefer code pen, that's totally fine as well. But I'm gonna be using a code editor. And I have a simple project structure set up here, just a custom CSS file, just some images that I prepared in advance, some custom JavaScript that we're gonna write. And then the notes here just contain a list of the sections and the content for each section, and then finally, it's the index.html, which we'll use to write our entire page. So, the first thing we have to do is start by adding the beginner HTML, or the starting HTML. Now, I have a snippet here that I can use, but if you don't have that, you can actually head over to the Bootstrap website, go to the Documentation, and you can actually find a starter template right here, if that's what you want to use. And it contains basically every reference that you need. It references the CSS, and also the JavaScript. So this is the quickest way to start. So I'm gonna simply copy this, I'm gonna paste it in my document here. And, we're ready to go, basically, and I'm just gonna change the title here. We're gonna delete this, and I'm gonna do two things. So, just so that I don't forget. I'm gonna load my custom CSS. So I'll have a link linking to my custom CSS file, and then I'm also going to link my custom JS here. So I'll have a script. And the source is gonna be js/customjs. All right, so, first thing on the list is we're gonna start by creating our nav bar, for the nav bar, we can start writing it from scratch or we can check out the Bootstrap Documentation. So, you can find the nav bar here, and also with a bunch of examples here. Now if you want to start from scratch and create your own, that's probably the easiest way. Otherwise, simply copy the code from here. I'm gonna start from scratch because it's the easiest for me. So, we're gonna create a nav with a class of navbar, and also fixed-top. And also, let's give it an id of main-nav. All right, inside, I want to display two things. I want a logo and I want a navigation. So, for the logo, Bootstrap actually offers this special class called navbar brand. So I'm gonna create an anchor tag with the class of navbar-brand. And that's gonna link to index html. And then inside, I'm simply gonna put an image that links to my logo.svg, and I'm gonna give it an alt of logo. So, let's check it out. All right, next, for the navigation, I'm gonna create the ul, and I'm gonna give it a class of nav. And that class of nav, we'll have three list items, which will eventually navigate to the very sections in the page. So, I'm gonna say list item, with a class of nav-item, times three, and inside, I'm gonna have an anchor tag with the class of nav-link. Again, these are Bootstrap classes, I'm not adding anything of my own. So the href will be features, which will eventually be the id of the sections that we wanna jump to. We'll also give it a text. And then we have pricing, of course with a hash sign in front, pricing, and finally, testimonials, and testimonials, right? All right, and that is the navigation. And Bootstrap, of course, aligns everything, it sets everything up, so it's really easy to quickly build these pages. Right, and that's the nav bar. So, let's move on to creating our hero area, and as you can see, we have quite a bit of content in here. We have this left side, which contains basically a main statement, a secondary statement, and a list of benefits. And the right side, this is the left, this is the right side, it contains our main call to action. So we have a form which grabs name, email, address. So, to create that, we're gonna use the Jumbotron class. So Jumbotron class, or Jumbotron component, I think it's more correct, it basically creates something like this, a component with padding and special styling for the content inside it. And we start with a div class Jumbotron. And, then inside, we are gonna use two columns, basically. We're gonna use the grid system with two columns, one containing this content on the left, one containing the content on the right. So we're gonna start with the container. The container class is used to create a wrapper, basically, for your content. And depending on the screen width, it's gonna be either fluid or it's gonna have a fixed width. So inside the container, now we're going to use the grid. To do that, we'll start with a row, and then inside the row, we're gonna add our columns. So I'm gonna have a div, with a class of col-lg-8, I'll explain what lg stands for in just a little bit. And then plus div, with an id of col-lg-4. All right, this basically creates four columns, eight columns, sorry, and then four columns. The lg stands for the break point, which means only create this separation on large screens and higher. On smaller screens, these will be 100% width. So, on this side, let's see what we have to create. We have the title, subtitle, and the list of benefits. I will do this, h1. Now, instead of the regular h1, I'm gonna add a class of display, if I can type, display-4, and display-4, we'll just make the text a little bit bigger, you can find these styles under Typography here. Whoops, so Typography. Right, here is a normal h1. And here are the display settings, right? Display 1, 2, 3, and 4. So, display-4. And I'm just gonna copy and paste the text, so this will all go faster. And then I'm gonna use an h3, with the class of font-weight-light. This is a utility class for typography, provided by Bootstrap, that just changes the font weight to light. And also, I'm gonna add another utility class called text-muted, and this will change the color of that text to a more muted tone. So in here, it will basically say something like this. All right, next, let's see about that list of benefits, so I'm gonna say ul, list-unstyled, because I don't want any kind of bullets or anything like that, and then inside, I'm gonna have four list items. So list item times 4, this is an Emmett extension, by the way, for Visual Studio Code, which just allows me to write shorthand code like this, and then expand it into the final markup. So each list item will contain an image that's sourced to img/icon-checkmark.svg. Let's also give it an alt. And then inside, I'm gonna paste the text for all of those features. All right, that should do the trick. Let's have a look in the browsers, see what we got. All right, so that's starting to take shape. We have the title, subtitle, and list of benefits. Of course, it doesn't look like this yet. This is where we'll add some custom styling in the final section of this streep. Now let's move on to the section on the right, which contains the form with the main call to action. Inside this element, we're gonna use the new component in Bootstrap 4,which is a card. So, if you've used Bootstrap version 3, for example, you might be familiar with the panel and well components. Well, those were removed, and they got replaced with the card component, which is like an all-encompassing component, which also has a lot of flexibility. So, I'm gonna create a div with a class of card. And also text-dark, this is another utility class that prepares the card to signalize, signalize, is that a word, [LAUGH], it basically tells the card to display dark text. There we go, so inside the card, we have two components, card header and card body, and the card header will have an h5 and an h6. So the h5, I'm gonna give it a class of card title, and it's gonna say start your free trial, and the h6 is gonna have a class of card subtitle, and also text-muted. And the text will say no credit card required. Now, inside the card body, we'll have a form. So we'll say form. We're not really interested in the action right now, but we want to display, basically, two groups of elements. So we have a label plus an input, label plus an input. A pair, like this is organized into a form group. So, form group, and then inside, we'll have label plus input. The label is gonna be for, let's say name, name here, and this will be an input type text. We'll give it a class for proper styling. We'll give it a class of form-control. And also an id of name. So, whenever you click on the label, the input will be selected. And then let's add a placeholder that says, enter your name. We'll do the same for the email, so this will say email address. And the type here will be email, class, form-control, that's the same, and the id. We'll also change this to email. And I will update this, as well. Finally, we'll add a submit button. So, we'll say button. The type is gonna be submit. And we're gonna use some Bootstrap classes for the buttons. Now, to create a button, you simply add the btn base class, and then if you want, you can add a modifier class. In my case, I want a btn-primary, and a btn-lg. And also what I can do is say another utility class, w-100. This stands for width 100%. Bootstrap created these utility classes that are just so easy to remember and so easy to use. And they're really, really useful. And w-100 is one of them. The text, simply, start your free trial. All right, and finally, we have a card-footer, and the card-footer will basically have a paragraph that says, in small text, and that should do it. Let's have a look. Yeah, that is the card. So again, we have the card header, the card body, and the card footer. And with that, we've actually finished the initial markup for our hero. Of course, we need to add a little bit of styling. There are a bunch of classes that we need to add to properly align all of the elements in here, but we'll get to those in the final section.