PSD to Bootstrap 4: Turn your web design into a web page | Luke Fabish | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

PSD to Bootstrap 4: Turn your web design into a web page

teacher avatar Luke Fabish, Let's get coding!!

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction to the class.


    • 2.

      Who is this class for?


    • 3.

      What you'll learn in this class.


    • 4.

      What is Bootstrap?


    • 5.

      Bootstrap concepts overview.


    • 6.

      How to implement Bootstrap navigation.


    • 7.

      How to make Bootstrap navigation responsive.


    • 8.

      How to add a dropdown menu to Bootstrap navigation.


    • 9.

      Create a layout with containers, rows and columns.


    • 10.

      Bootstrap columns in detail.


    • 11.

      Add a data table with small columns.


    • 12.

      Creating Bootstrap input controls.


    • 13.

      How to create a page footer in Bootstrap.


    • 14.

      How to customize a Bootstrap web page.


    • 15.

      Class review.


  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This is where you learn how to turn a web design into a web page with Bootstrap 4.

Bootstrap is the fastest way you can build a web page that's responsive and displays perfectly everywhere.

This class teaches the concepts and techniques you can use to build Bootstrap web pages.

Besides fundamental concepts, you'll lean how to:

  • Create complex navigation that works perfectly on large and small devices.
  • Implement dynamic layouts using Bootstrap's grid styles.
  • How you can customize your Bootstrap web page to make it really your own.
  • This class uses a variety of theory and practical examples to make sure you learn to use Bootstrap with confidence.

I'll be with you every step of the way during the course, so if you need any help - just ask!

Meet Your Teacher

Teacher Profile Image

Luke Fabish

Let's get coding!!


I'm a great believer in empowerment through learning, and that's what I believe teaching on Skillshare is all about.

As a professional software engineer I've benefited massively from educational resources on the Internet.

Especially, I want my Skillshare classes to be an entry point for anyone who wants to learn about programming from the very beginning, and to start a journey into the world of professional software development.

There are a lot of misconceptions about what kind of person you need to be to be a programmer.

Good at maths? Obsessed with computers? High-IQ?

None of that is required.

If you're ready to learn, and willing to work through a problem, you've got what it takes.

Person... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction to the class.: Hey everybody. My name is Luke Fetish. I blog at I've been a professional software developer since 1999. But today's class is all about how we can turn our web design into a web page using Bootstrap 4. If you're not familiar with Bootstrap. Bootstrap was originally developed by the folks at Twitter for building responsive web pages super fast. By responsive, I mean web pages that look great on a device of any size. During this class, we will cover Bootstrap basics. We'll learn how to include Bootstrap in our web page. We'll learn all about Bootstrap fundamentals like the grid and how you can use it to lay out your web design to turn it into a web page. Don't worry if you don't have a web design of your own. I'll be supplying one during the class. Finally, we'll learn how we can customize the look and feel of Bootstrap to make sure that our web page really feels like our own. If you have any questions or concerns, please don't hesitate to get in touch. I'm here to be with you and ready to help every step of the way during this class. I'm super happy that you're here and I can't wait to get started and see what you build with Bootstrap 4. 2. Who is this class for?: So, who is this class for? Well, this class is for anybody who wants to turn a web page design into an actual functioning, working web page. We're going to be using Bootstrap 4 for this. Bootstrap is much more low level than graphical website builders like Wix, and Weebly, and tools like that, but it does provide a great compromise between building web pages quickly and having the flexibility of writing custom code. But this does mean that you are going to do some coding during this class. I am assuming that you are a little bit familiar with HTML with CSS, and with using a text editor. Now, if you're not familiar with those things, then don't worry because we're here on Skillshare, and there's a bunch of awesome classes here that you can use to learn those things. The teachers are fantastic and you'll be up to speed in no time. So if you're ready, sit tight for the next lecture where we'll go over in detail what you will learn during this class. 3. What you'll learn in this class.: Hello everybody and welcome to the video. We're going to be checking out what you are going to actually learn in this class. What things are we going to cover? Well, the first thing we better look at, is we better find out what bootstrap actually is anyway, I mean, is it a framework or a library? We'll find out where it came from, we'll see what problems it solves, why does everybody liked to use it so much, and doesn't introduce any problems. Spoiler alert yet doesn't little bit, but not so much that we wouldn't want to use it. Then we're going to move on to fundamental bootstrap concepts. We'll see how it handles navigation, we'll find out about the bootstrap grid, also will see how containers, rows and columns work. After that, we will move on to implementing some bootstrap navigation, we'll see how bootstrap's navigation classes work together. This is where you get to start to work on your project as well because you can start implementing this stretch away. We'll see how we can make the navigation responsive. Inside navigation is, of course, the menu that you would put onto your website to take you to different parts of your website. We'll see how we can make sure that displays nicely on different sized screens like on your laptop or your desktop computer, or on your mobile device, and then we'll see how drop-down menus work as well. This is another thing that we can implement straight away in our project. After that, will be moving on to the bootstrap grid. Now the grid is something that's used to lay out a web page. Putting things on a grid, which is to say in like rows and columns, makes everything line up nicely, and it also makes it easier to manage them as we change the size of our screen or even just our browser. We'll see, like I just said, how screen sizes work. We'll see what breakpoints are and how they affect the layout of your web page, we'll see how we can use the greed in different contexts as well. How the grid affects different jobs like laying out the overall document, how they can use it to structure and format a table of data. Also how we can use it to implement the footer. That's the bottom part of our web page that has maybe navigation again, maybe it has your contact details, maybe it has like your social media icons, these things. We'll see how the grid can help us in these different places. After that, we'll move on to using bootstrap input components. We'll see how we can use forms and controls and this forms like a text input or buttons. We'll look at how we can customize bootstrap to make sure our website or web design that was like our own. We're going to use individual CSS rules to do that. I will use some bootstrap styles as well. But mostly, we'll be exploring how we can use our own CSS to change the way a page looks. Sit tight for the next lecture. When we will get into introducing bootstrap, we'll find out what it is, how it works where we want to use it. 4. What is Bootstrap?: Hello everybody. Welcome to our next lesson on turning a web design into a web page with Bootstrap 4. Now before we go any further, we should have a talk about what Bootstrap actually is. Well, what is it anyway? Bootstrap is a collection of CSS and JavaScript. That was originally developed by Twitter to provide consistent behavior across all devices and browsers. What we're saying here is we've got Bootstrap. It helps us make web pages that look the same and behave the same all the time. Because if we think about how people look at the web at the moment we've got telephones and tablets, laptops, and then desktop computers. You know every single one of those could be using a different browser. Potentially people using more than one browser on the same device. Each one of those browsers is going to display your web page just a little bit differently on those different devices and making your web page everywhere is complicated and time-consuming. This is the problem that Bootstrap solves. Where does Bootstrap come from? If we go there, this is what we find. This is the front page for Bootstrap. You can download it here and you have instructions down here on the other ways that you can use it as well. I'll show you how you can use it when we get started building our project. But does Bootstrap have any drawbacks fall? Yes. A couple. Typically 100K -200K when you include it. When you include the entirety of Bootstrap in your web page. That's a very small thing to download every time. Bootstrap, even though it's less ubiquitous than it used to be, it is still super popular and there are lots of Bootstrappy looking websites. But like I said before, we are going to make sure that we can customize our website so that it doesn't really look like every other website that's using Bootstrap. Now that we've had a little introduction to Bootstrap and what it is. In the next lesson, we will go over Bootstrap fundamental concepts. We'll learn about the building blocks of Bootstrap that we can use to make our interfaces. 5. Bootstrap concepts overview.: Everybody, welcome to our next lesson on turning a web design into a webpage with Bootstrap. This time we're going to be checking out some fundamental Bootstrap concepts and so these are the building blocks we're going to use to put our webpage together and there are really two main categories that we'll be looking at during this class. The first is navigation, and the second is the Bootstrap grid and the grid is comprised of containers, rows and columns. So let's check those out in a little bit more detail now. So at navigation. Let's imagine that this is like a webpage, very boring webpage. A webpages are going to have a menu on the top of it, or usually on top, we'll see some other options in a moment and when we have these menus, we refer to these as the navigation. This is what a user uses to navigate their way around our website and they'll often have difficult things like home and the about page and I'll link to the contact page and maybe if you're using a site that you log into there is an option to click on something that's related to you as a user. That menu can appear at the bottom of the page or on the side, doesn't really matter, this is all navigation. One of the things that Bootstrap navigation gives us is drop-down menus. So when you click on maybe your user menu, you get a drop-down where get to do things with your account or fiddle with the settings for the way the webpage works or the website works, or just log out. Bootstrap navigation is also responsive. When you look at a web page on a small device like a telephone you'll see one of these little things in the top right of the screen, usually it's in the top right often called a hamburger and when you click that, then you get another kind of menu dropping down from there and this is a way of saving space on a mobile phone screen. So we still have our navigation, but most of the time it's hidden until the user needs it. We just hope that the user guesses what that hamburger thing is actually for. I think most people are used to that by now. So we've talked about how the navigation works. Now we'll have a look at Bootstrap grid containers. A container is something that surprise, contains other components of the Bootstrap grid and the important thing to note here is that other parts of the grid won't work very well unless they're inside a container and this is one of the compromises we get with using Bootstrap is that sometimes it can be a little difficult to pick and choose which parts of it we want to use. Some of the components, not all of them, but some of them are definitely interdependent and so if we want to use one of them, we are going to be using, well, more than one. Anyway, we've got a container, it's something we can put things inside of and then the next part of the grid is a row. A row is, as you might expect, a horizontal arrangement of other components and so we can put multiple rows inside a container. Then once we've got our rows in place, we can add columns and columns in Bootstrap are designed to have a specific size. They always split up into groups of 12. So you can have a column that takes up the entire width of the grid or you can have one that takes up one-twelfth of the grid and we'll see a little working demo of that right now, but the important thing to remember is that when we use the Bootstrap grid, we're going to be putting things inside a container. In that container, we'll probably have rows inside those rows will have columns. We can specify the size of those columns, and let's see how they behave right now. So here's a little webpage put together just to demonstrate how the grid works. We can see that I've got a special kind of container that is actually a fixed width, doesn't occupy the whole space of the screen, and inside there you can't see the rows because the rows are completely occupied by the columns and you remember how I mentioned that columns are split up into portions of 12. So we've got this col-12 here and I've used this name col dash 12 intentionally because this is how the columns are referred to in Bootstrap. So this is a little introduction to the Bootstraping styles and the way that they named, and so we've got a col-12 that means it's 12 columns wide, which is to say it takes up the whole space. Coming up next on the next row, we've got col-6, which is surprise half the width of our col-12 and then underneath that, we've got 1, 2, 3, 4 more rows and they're occupied by these different kinds of col for columns and they all look the same at the moment. But you can see that some of them have sm in the name, some have md in the name, some have lg in the name and this is part of Bootstrap's responsive approach to dealing with the grid. What that means is that when we have a col dash for column, what that's saying is that this will always be a column. But if we make this page a little narrower, you can see that our container is shrinking up, when a container shrinks, the rows shrink and so our cols, well, shrinks to occupy their smaller container, but once we get past a certain size, you can see something's happened here. What's going on? We can see that these col-lg-4 what were previously columns, they have all been stacked up on top of each other and this is how Bootstrap accommodates smaller screen sizes and says, well, maybe in your layout, you want these things to be columns when you're on a big screen, a large monitor of some kind, but when we get onto a smaller screen or a smaller monitor or just a smaller browser window because I'm just shrinking it up manually here. We don't want them to be side-by-side anymore because they're going to be all cluttered and so we'll stick them on top of each other. So that's for col large. With col-md, which stands for medium, it's going to do exactly the same thing, but not until we get onto a medium sized browser window. You may be wondering at this point, well, what counts is medium, what counts is large? This is based on actual pixel sizes and we'll have a close look later in the class at the exact pixel sizes that Bootstrap uses to decide about whether we're at a large, medium or small screen or small browser window. Once again, once I squeeze these up some more, you can see that our col-lg is stacked up on each other, our medium columns have stacked up on each other and now we're down to our small columns. Let's again, we got a little bit further and they stack up on top of each other as well and now that Bootstrap has decided we are on a genuinely small screen or browser window, and we don't need those margins on the side anymore. You can see it takes up a 100 percent of the width of our browser window and then finally we squash it all the way up and these col-4 columns because they don't have a screen size. They don't have sm, md or lg in their name. They are always columns and so they will never stack up on each other. So that is a super quick introduction to Bootstrap's navigation and grid. This is intended to give you a high level overview to see how these things work. Next, we're going to go on to implementing some actual navigation and this is where you're going to start your project. 6. How to implement Bootstrap navigation.: Hey everybody. Welcome back. In this lesson, we're actually going to start building something. We're going to implement the navigation for our project. Now, the project that, well, we're going to be working on or I'm going to be working on anyway, is building out a little part of this administration interface. Now if you have a design of your own, you want to implement, awesome. But the main point is that, it has all the elements that we're interested in exploring during this class and that we've got some navigation up top. We've got our footer down the bottom. Our navigation has a little drop-down menu there from our little user icon. Even on the far side, we've got some general layout here on the left, we've got the brand and some filler text there. On the right is the next major section of the web-page, we've got a little table. We've got some inputs as well. These are things that we can use to explore using bootstrap to implement our webpage design. If your design doesn't have all of these elements, you can still put them in temporarily just to explore the concepts and to make sure you get the most out of doing this class. You can always remove them afterwards. Of course, if you don't have a design of your own, I am supplying this one in the resources section for your project so you can work along with me and build this same webpage. Like I said earlier, today's section is all about getting started on implementing the navigation so Bootstrap navigation. Navigation in Bootstrap is implemented by assigning some Bootstrap CSS classes to HTML elements, that may seem belaboring the obvious there, but this is pretty much how are we going to get everything done. In Bootstrap, we create some HTML elements, we apply Bootstrap classes to them and then we get all the benefits of using the Bootstrap system. This is the basic structure of navigation in Bootstrap. We'll start off with an enclosing nav element and then we have an unordered list. Here's the opening of the unordered list, closing of it, and these the items in the middle. The way we turn that into some actual Bootstrap navigation is by assigning these classes to these particular elements. Nav elements gets navbar, navbar-light, navbar-toggleable-md. This one, besides being a mouthful, is a bit ambiguous as to what it might mean. This is to make our navigation responsive. In Bootstrap 4 you either have responsive navigation or you have no navigation at all, it doesn't work otherwise. You may be thinking, well, how do I remember this class names? They don't make a lot of sense to me. I have to agree that in Bootstrap, the navigation classes don't seem to be super coherent or easy to remember so that's why I'm going to supply our completed navigation as a template for you to use that will also be in your resources. You can use that as a template for your future designs. Because I know I am certainly guaranteed to forget some vital class time that stops my navigation from working. I work off a template as well. Anyway, we start off by applying these CSS classes, navbar, navbar-light, navbar-toggleable-md to our other component nav then for our unordered list, we say it's the navbar-nav. What we've got here, the nav element on the outside. That's our navbar that's how we contain it for our navigation and we're saying this unordered list, this ul, this is the navigation that goes inside the navbar. Then finally, we say these guys are nav items. We assign them plus nav item to the list items. Let's do this in some code. This is the skeleton file that is supplied in the resources for your project. It's really just a basic HTML file that has a bunch of content delivery network CDN links to Bootstrap and jQuery file. This is where we get all our CSS and JavaScript from. We are not using all of it straightaway. But I'm working from this skeleton file with everything included at the beginning so that we don't have to keep on adding stuff to it as we go through. The one non bootstrap related thing that we're including here is this material icons font. I'm using that for the icons that are in the application, that's why that's there. I thought we need to get started building out our navigation run. We're going to start off with some nav tags. I'm just going to implement these without any classes at all at the beginning. I just find that a lot easier to do at the start, makes most sense to me. I have an unordered list, unordered list again, close that off and then we'll have our li elements. I need to go and check our design to see how many things we've got in our navigation. Now the tricky thing here is we've got 1, 2, 3, 4, 5, here, and then we've got these other ones on the other side here. We'll be exploring those in a lesson or two. But the point is that these are two separate groups of navigation and right now we're going to do the first one, pricing about FAQ, Blog, contact, so it's a pricing about FAQ, blog and contact. Clearly the next thing we need to do is check out out awesome navigation in a browser. Here's our file in the browser. As you can see, it looks exactly like an unordered list. Of course this is expected. We haven't applied any styling to these elements yet so we'll say class equals navbar and then navbar-light. Navbar-light is just for the color. What color do we want that file to be? It's going to be light in color. Then we have our excellent navbar-toggleable-md, md is for medium, meaning we want to a have responsive behavior to kick in on a medium-sized browser. Then we have class equals navbar-nav. Finally, we can have, actually it's not quite finally, but we'll pretend it's finally for now, nav-item. I'll just pop those in there for these guys. Let's see how that looks, I know how it's going to look. Well, that isn't like any navigation at all. It's a little bit better because they've spaced out horizontally now, or they're arranged horizontally rather than vertically. But still, that's gross. The thing is we want these to be clickable so we need to put them in some clicky element. The thing is in Bootstrap navigation, we use an anchor and we'll set the href to hash pricing. That's what we'll do for now. Just finish that off. Plus our 'a' tags. Now, that's still not going to look great for you. Get back over here we can see they've turned into clicky things, but they're all bunched up together and that's because we need yet another class. Then we say class equals nav link. We reload that and finally, our little menu is magically transformed into Bootstrap style navigation. Something interesting is going to happen here. If I squish this browser up, you can see they fall down on the side there and vertically again. Now this is the responsive behavior. The default responsive behavior of Bootstrap. It wants to reorganize our menu into a vertical menu is as soon as our browser gets smaller than medium size. Like I said, we'll explore what these medium and small and large designations mean later on. But if I change that to sm and then go back over here and reload the page. I can get a bit smaller with the screen now before it starts jumping around. But we'll change that back indeed. But what we've done here is implement our first bit of navigation. Now would be an excellent time for you to try that out in your own project. Remember if you've run into any problems at all, please let me know. I'll be really super happy to help you out. In the meantime, hang tight for the next lecture where we'll make our responsive navigation a little bit more sensible and see if we can avoid having this vertical menu by default. 7. How to make Bootstrap navigation responsive.: Hey everybody, welcome back. In today's lesson, we're going to be checking out how we make our Bootstrap navigation responsive. Well, how are we going to make it more responsive? Because, it's already responsive now. It'll respond to the size of the device that we are looking at edge on. But it's not really the best right now because if we look at it, here it is, we've got our little menu at the top here and if we make this browsers smaller, you can see I've got the code in the background. If you make it smaller and response to the size of our browser, it gets an update from the browser and changes to being vertical rather than a horizontal, that's cool. But if we're on like a mobile telephone and our screen is more than this kind of format, then our menu's taking up a massive amount of space at the top of the screen and we don't want that. What we want to do instead is give the user an option of making the menu expand and collapse. To do that we're going to have to use some JavaScript and we're not going to write any JavaScript. We just have to include the JavaScript libraries in our source code and like I said in an earlier lesson, the file that I've been working off, the skeleton file already has this stuff included just for simplicity, but if you had just going ahead with your own file and just included the Bootstrap CSS, now is the time to go and include these other JavaScript files. You may be wondering, well, how do I do that? How do I know what I need and where I get it from? The easiest way to do that is head over to get So head over to the Bootstrap page. You can just type Bootstap in the Google you get here, go to get started, and in Quick Start, you can see that they very commonly provide a copy and paste option if you click the little copy to my clipboard. This is for the CSS, but we're interested in the JavaScript and here is the JavaScript right here is signed to you. Click "Copy to Clipboard" and then you can just go and paste it into your code. Let us see the easy way to include these files. Once again we need jQuery, Popper, and Bootstrap JavaScript. We need all three of these because the Bootstrap JavaScript uses jQuery and Popper. We are also going to add a button to our menu, so we can click the button and make the menu expand and collapse. Then finally we're going to wrap our<ul in a<div, and we still will have some classes and especially identity or ID value that'll tell the JavaScript, hey, this is the thing that needs to be expanded and collapsed. I'm sure you've run into this scenario before. If you're looking at the web on a small device of some kind, you'll often run into one of these little guys up here in the top right of this screen, often derisively referred to as the hamburger icon because some people think it looks like a hamburger. To me it looks more like looking down at a toaster. But anyway, this is the thing that we would click on and then our menu expands out and user has the option of hiding the menu until they need it and expand it, click it and you're done. This is the structure of our navigation HTML at the moment, we've got our nav element and then we have an unordered list, listen list items inside it. Now what we're going to do is, as I mentioned, add a button that will come immediately after our nav element. It will have a span inside it, and then we'll have this div. It starts just above our unordered list element and ends just below it to wrap our list, which is to say it's a wrapping navigation around menuContent and these are the changes to the HTML that we're going to make. What we'll do is we'll start by adding our button and it's span element to our code. If you're coding along with me working on your project, this would be an awesome time to open that up and get coding as well. We're going to do this in little bits as we go just to make the changes smaller and more manageable. Here I am in my code and here's where we have our navigation. So here's our nav element, unordered list, or if it's closes, and then I'll list items inside. Now the first thing we're going to do, like I said, is we're going to add a button. Sounds can add button right here and inside that button we're going to have a span which is going to be empty. That our best efforts change done, what comes next? Now we're going to have to add some classes and some other attributes to our button, to make it do anything interesting or set it up so that it can do something interesting. You may notice that we don't have any role or aria attributes here. I think I'll include a role attribute later on somewhere in our code but the thing is that I'm missing out a lot of accessibility data or attributes for our mackup here. That's not because I want my code to be inaccessible, I just want to keep it as clean and minimal as possible for the purposes of teaching how Bootstrap works. If you're used to working with accessibility attributes like that, please don't go thinking that I'm advocating not using them and it's certainly not the case at all. But getting back to our code we've got out button here, It takes some classes nav bar toggle, because its job is getting to be toggling our nav bar open and closed, and navbar-toggler right. Which is a class to say, it should be on the right hand side of the navigation. It's a button. It's got this data toggle attribute called collapse and data target hash or pound navbarNavDropdown. These two are the things that will tell the JavaScript that we're including for Bootstrap. Ah, this button has a special role to play and it's going to be the thing that expands collapses our menu and the thing that it wants to expand and collapse, it will have an ID, this is a CSS selector here of hash or pound navbar Dropdown. The other change we want to make here is adding navbar-toggle icon to this span. We didn't have to put anything inside the span ourselves, if we give it this class, the Bootstrap CSS will fill in a little icon for us. Let's get started adding that now. Here we have, I cannot code again and navbar-toggle icon. If we save that and then take a look at it in our browser, I just did a reload and we can see a difference. If I squash it up, we can see we've got our button here that our menu isn't being hidden yet just because we've made half the changes we need to make. If I go and click on it, nothing happens. Let's go back and see what other changes we need to make to that code to expand and hide our menu. Next thing we need to do. Well, we've got to wrap our unordered list in a div. I'll do that before I do anything else. Here's our unordered list, closing div and then open the div in there. You can hear me suddenly doing the math on how many lines need to be indented. That's too many [inaudible]. You've got this div wrapping our unordered list element. Now we are going to have to put some classes on our div. I'm going to have to give it an ID. Now this navbarNavDropdown ID is opposed to the thing that we told our button about. This is the way that we identify the element that needs to be expanded and collapsed. The class is we give it collapse and navbar collapse. Collapse and the ID should be navbarNavDropdown and say now you should see something a bit more interesting. I'm going to refresh my browser and look our navbar has disappeared because we've got our browser contracted a little bit of the mine. If I pull the browser back out again, we can see our menu, our nav appears and disappears and our button appears and disappears and if we go and click our button and our navigation expands out and they can collapse it again. This is how we can implement a more responsive navigation in Bootstrap using a button to expand and contract or to show and hide our navigation. 8. How to add a dropdown menu to Bootstrap navigation.: Hello again and welcome back to our PSD to Bootstrap 4 class. In this lesson, we're going to learn about implementing a Navigation dropdown menu. Just to do a quick refresh, a dropdown menu for a navigation or for a website menu is where we have a regular menu like this and then I use it clicks into one of the menu items. We have another little sub menu that pops down out of the bottom of that menu item that we clicked. Here's the thing that's most important to remember at that these drop down menus, they just another li or list item in our normal navigation. Here's our simplified view of what our navigation looks like, expressed just as HTML elements. I know we've wrapped this in a div and you put a button at the top. But this is the fundamental structure of navigation in Bootstrap. What we can do when we want a dropdown menu from one of our navigation options or one of our menu options is to add a new list item with class equals dropdown. Here's the thing, when we look at the mockup that I'm personally using to implement the project that I'm making for this particular class, we can see that I've got a dropdown menu off on the right hand side here and it drops down out of this little user icon, but it belongs to this other group of options and what we have here are two separate pieces of navigation. We have pricing about if a queue blogging contact and then we have this other group upgrade and then a bell for alerts and a little help icon and then this user menu. These are two pieces of separate navigation and when we want to pieces of separate navigation in Bootstrap, we're going to have two separate unordered lists. We make this second unordered list pretty much the same way as we made the first unordered list in order to implement our second piece of navigation. If you're coding alone as well now would be a great time to add a second phase of navigation if you're working off the same mockup that IM. Once again, if your project doesn't require second phase of navigation, then I would just go and edit anyway, just say you have a practice at it and see how it works and what it's like. I'm going to implement this pretty much exactly the same way as I implemented the first one. I've just got an implemented that second menu as quickly as I can. I've speed that up so you don't have to spend too much time watching me type things up. What you need to know here is that it's basically the same as the first navigation that we implemented, here is the first one up here, where we've got ul, navbar-nav, li class equals nav-item, li class equals nav-link and then some stuff inside out a element. The only real difference so far is that while one of them follows exactly the same pattern, it has upgrade in it. The next three don't have any text inside them, they have an i element with class material icons and then the text for the icon that we want in between the i tags. Now this is how the Google material icons font works. This is just for me, a really convenient way of easily getting icons into the application. But the one that we're really interested is down the bottom here which is not notifications, it is person. If we actually take a look at this in a browser before we do anything else, just to know way where at. This is our nav as it was and here it is now, here is our little person, our help, our notifications, upgrade. Now, that you can see it's squashed off against the other navigation doesn't look very separated and we want to separate it to indicate that it's got a different purpose because this a new navigation. This is all about the user, this is things that they do that are related specifically to them or actions that they can type. Whereas on the left here we've got stuff blue. On the left here we've got stuff that relates to the website Pricing and About, FAQ and Blog, Contact, things like this and we want some separation between those. What we can do here is we're going to put another class against our ul, uto, ml-auto, what on earth does that mean? This is a part of some shorthand that Bootstrap has adopted for moving things around on the screen. What this really stands for is margin left auto, so ml-auto. This means just shuffle the available space that we've got onto the left-hand side of this navigation item and then I'll push it all the way across to the right of the screen. If we save that and we go off and look at our browser, reload, there we go. But what we need to do now is actually hang like a sub-menu of our little user icon. To do that, we're going to add a class two i, bottom most li, or bottom most list item class equals drop-down. I'll do that next, here we add our little li class equals drop down, then we go back to our presentation. Then inside l last dropdown, or our last list item where we're going to head to drop down. This is the structure that we want to have. We're going to have encased buddy li or enclosed buddy li which is our dropdown menu, that we've just given the drop down plus two. Then we have as usual as we have all of the others and a element, this is the clickable part of it. We just added a user icon to it. Then our sub menu is actually enclosed inside a div. It's going to be a div which encloses a series of a elements, and thus a elements will comprise our dropdown menu. What I'm going to do is I'm going to go and put out div and a elements in there before I do anything else, <div> plus </div>, we're going to have six options in there. Now, we're going to add some extra classes to each of these things. We've already given our list item a dropdown class. Our i element, besides the usual nav link class that we give to all our navigation links. It also needs a data toggle attribute set to dropdown. Once again, this is something for our Bootstrap JavaScript to hook into and know that this is going to have a special function. Next we want out div and closing our dropdown menu to have the class dropdown menu, and then each of our elements inside our dropdown menu div is going to have a class of dropdown item. Let's go and put those in right now. Actually the first thing I'm going to do is put some content into these things. But there's some other things we need to do here, and it's an attribute called data-toggle equal dropdown. Then our div is class dropdown menu. There's some more we have to do to that dropdown menu, but I'd just like to take a look at it in the browser now. Just because I find that quite useful to see, help to see how things work. Because that way I know which class is doing which job. You can see that our drop-down menu is looking pretty miserable at the moment. I'm list because it's disappearing off the page, that's because they are by default, aligned to the left of the thing they dropped down from, aligned to the right of our little user icon. Because it's on the far right of the page and there's a class we could use to do that, dropdown menu. Let's take a look at that reload, here is our little dropdown menu. It's got a few things that are clearly quite wrong with it. Not least that out, drop-down menu options as just spread across the drop-down menu and not all in a nice vertical row. That's because we need to make those proper links and give them a class which will tell Bootstrap that they add drop down menu items. Of course we need to add a class, I'll just put those in super quick. If we look at that in the browser now, we can see that they're all arranged vertically and nicely styled in a dropdown list. There's a couple more things that we need to do though. If we take a look at our design, we can say that our username is in bold, our plan name is in italics and we've got a couple of dividers here, just splitting up the options in the dropdown menu, so we'll add those to our code now. Bootstrap gives us a non-zero class, we can use it, the div class dropdown-divider. We just need to have an empty div for that. I can pop that in there, that's just going to make a little element with a border on the bottom of it. We save that, check it out in the browser. You can see we've got added dividers now very nice. The last thing we need to do is style our user name and plan name. We can just use regular old HTML elements for that. We're going to have strong and em. Once more we'll check out our browser, reload, there we go. Here's our username, our plan name, and then we've got a lot of options instead as we would expect. Of course, our navigation is responsive. If we score sheet up of it until we get to a little hamburger icon and we open that up, you can see that we can get into our little user icon and our dropdown still works as we would expect it to, and of course, if we open that up again, we can see that it maintains its state and stays in the drop down position. That's how we can implement a responsive dropdown menu using Bootstrap's navigation. 9. Create a layout with containers, rows and columns.: Hey everybody, welcome back. In this lesson we're going to be checking out how we can use Bootstraps grid to create our web-page layout. Just as super quick refresh. I talked about the grid. It's really broken up into containers or into like an overall container. Then in that container we can have rows and then in those rows we can have columns. We put our website content into those columns so that Bootstrap can rearrange them for us depending on the size of our browser or the device that we're looking at the web-page on. Today we're going to be checking out how we can use these columns to create an overall layout for our web page. This is the main content of our web page. I'm missing the [inaudible] at of this screenshot just for clarity. But we've got these two columns of stuff in our page really. We've got the one on the left with some brand identity and some text below it. Then on the right, we've got our main data. I suppose we've got our heading, we've got an input for searching with a button for adding a new data item. This is showing information about website forms, by the way and information about those forms. Each data item is a specific and individual form that might be displayed on a website. Information about those forms is shown in a little table. We're going to be exploring how we can use Bootstrap's Grid to implement this overall layout. At a high level, what that's going to look like is a great big swath of divs. But what we have is an outer div right here, which is our container and then div inside there, which is going to be a role. Then we've got these two other divs. Each of those is going to be a column, one for the left hand side, one for the right. What I think I'll do is I'll pop that into the code right now. Then we can go and put the appropriate Bootstrap styles on those gifts to make them operate like containers, rows and columns. If you're cutting along to make your own project, whether you're using the mock ups applied in this class or one of your own. Now's a great time to start working on that again. Please don't forget to post your projects in the class project space so that we can see how you're going, you can get some feedback on the work that you're doing. Or if you've already in 20 problems, that's a great opportunity to get them. Here we are in and out code and you can see we've got our navigation implemented here. What we're going to do is we'll go down to the bottom of that navigation, close up them. Like line there and here's where we make all our divs. We'll have one div for our container and another for our row. Then inside there, we will have column one, column number two and we can digitize. This is the fundamental layout of the main content of our web page. I'm just going to put a little comment main content. Then a little one at the end there just to say that this is where that finishes. However, the looking at that in the browser, because really it is totally nothing to see yet. This is what we've got in our code down. Now we're going to start putting in some classes, we are going to have a container, row, col-md-4 and then col-md-8. I'm going to put that as in the card right now. Class equals container. I'm just going to copy that a few times and change that to row then col-md-4 and then col-md-8. What we've got here is our overall container containing our row and row is got two columns in it. We've got one column that takes up four spaces and another column that takes up eight. Remember from the previous lesson where I was talking about how we have 12 really like column spaces in total in Bootstrap. This is a way of saying, well, left-hand column is going to take up a third of the page and our right-hand column is going to take up two-thirds. In the next lesson, I'll be looking at columns in more detail so we can talk more about how these column widths work and more about how these designations like md, which stands for medium as in a medium-sized screen. We'll talk about how those work as well. But for this lesson, just follow along and you'll be able to see an example of how they work in practice. Now we're going to work on the left-hand column. What we're going to do, left-hand column, you see I've got it highlighted it here down in the bottom. What we're going to have it out, that 10 column which is called md-4. We just fill that in as we're going to have another div, which will be another row and then another div which will be a column. Then we'll have an image in there. That's passive identity, but a branding and their logo. Then in our next div will have another row, which will have another column. Then this, etc, stands for the text. This is important by law so on. What we'll do is we'll put all of these divs inside out col-md-4, which is out left hand column. Here is col-md-4. I'm going to put a little comment on that as well. Column. Looks like that and say that. That's the right column. Just putting some spacing and some comments in here, this gets a little bit crowded with all these divs and columns and what have we floating around there. Just so that we can see them individually and clearly, so what we're going to have inside our holiday forwards, we're going to have a div which will represent a row. Really we've got two rows, so we'll have two of these outer divs. Then inside each of those we have a column, which will be another div. Then inside this one, we've got our image. Inside here we're going to have some text. Now I've got my image pre-prepared. If you're working off the example that I've provided, the skeleton code comes from my folder, which also has a image provided in it, in the image directory. In there we've got image and it's called entity doping. I'm going to put an attribute on that equals 100 percent. This is a stop gap being that I'm doing here. Because really what we want to do is style this with some individual custom CSS for our website. But I'm not doing any CSS at the moment. I'm leaving all that until the end when we customize the look of our web page, so that it's not all like to fall bootstrap styles. But for the moment, I just want to stick with 100 percent bootstrap just so that we can see how it works and we don't really muddy the waters with their own stars. In the last video lesson of this class, that's where we will look at the CSS that we can apply to our website to make it look less bootstrappy and more how own? For now, to stop out image from taking over the entire screen, I'm just going to put this width attribute on it. I'm moving along to the next bit of content. I know this is a row here, and this is going to be a column. This is going to be a row. This is also going to be a column. I know inside there we need to have some content. H2, this is important. I'm just going to fill that in quickly. But this is just basically the content we need to have in the left-hand column of our page. This is obviously before we've started styling it with bootstrap's styles. Let's just quickly take a look at our web browser to see how it looks. There it is, we got our brand and then our text. Already it's looking pretty much the way that we would like it to look. We are just going to add some rows, and columns to our DBS, just the constraint at a little bit, and it'll help with our styling of it later on as well. We can see that it's all being constrained into one page, which is our left-hand column. But what styles are we going to give it? We're going to start the second containing div as a row. Then the div that holds the image as cold medium 10. Now maybe slightly counter-intuitive to have calling the ten inside a Col MD 4. 10 would seem to be bigger than the four, so it asks how to fit that. Once again, this is something we're going to take a close look at in our next lesson. We'll move along and define our next row, add yet another Col MD 10. This is pretty straightforward to do in our code class equals row. Class equals. If I remember how to type code, actually MD 10. Of course this going to be the same class equals K. That's a 100 percent of the styling that we need to apply for left hand column. If we go and refresh that in our browser, we can see that it's squashed literally. Once again, we'll talk more about how this works in the next lesson without columns, and sizing. As we've implemented this as a column for a medium-sized screen as soon as we squash this up. B on the size of a medium-sized screen, we can see that suddenly they expand to take up a 100 percent of the width, which is what we expect. When there is no longer enough room to display them as individual columns, they all get stacked up on top of each other to make sure that they're legible, that can be read easily and are still laid out nicely enough to be browse comfortably on a small device. That's our left-hand column taken care of for now. But we also need to go on and do the right half of the page or the right two-thirds of the page, sorry, as well. Once again, we've got a pretty simple layout. Div and an H1 inside there, which says false. I'm not going bother applying these divs, and the styling separately in the code this time, because there's nothing either super shocking. This outer div is our col MD 8 that we created at the very start of this lesson. Inside there we've got a row, then a col MD 4 which will contain our H1 forms. You can see that there's plenty of other content on the right-hand side or in the right column. But we're going to implement that in subsequent lessons when we look at dealing with form inputs and controls, and then implementing a data table using bootstrap as well. Let's put this initial implementation of our right-hand column into our code. There's a very lonely, empty looking right column. We're going to have a div class equals room, then we have a div equals col MD 4, H1 forms, and we'll finish up our div. I think we are done, below that in our browser and surprise, surprise, there's our forms. Now, what we've done here is implemented two columns. As when we squash the page up a bit, we can see that they stack on top of each other, which is the responsive styling that we want. We can go and click our navigation menu. We can see it opens up and expands, and then pushes all the main content down the screen. But the thing is that our navigation, and our main-content are surviving together. Displaying nicely as a large page [inaudible] format. In our next lesson, we will look at columns in much more detail. We'll see how columns have different widths are defined and also how Bootstrap deals with columns for different screen sizes. 10. Bootstrap columns in detail.: Welcome back. In this lesson we're going to look at Bootstrap columns in a bit more detail. There's a few things that we haven't really covered super carefully up until now, which is how we can have big columns like col-10 inside smaller columns like col-four and the definition of large, medium and small screens. That's using like lg and md and sm for large, medium and small. We really haven't looked at or explained those. This is when we clear those things up. What I'm going to run through now is how columns are defined in Bootstrap, like col dash number, let's say col-one for instance. If you have a look to in the Bootstrap CSS, you would see that col-one is defined as 8.33333 percent. If we then go and look at col-two it's 16.66667 percent double that of col-one and then if we go through to col-three, we see it's 25 percent. The point here isn't really for us to remember these percentages but to notice that they're are percentages and they increase by eight and a third percent for each number. What that gives us overall is 12 columns increasing by eight and a third, equally sized, all the way up to 100 percent. The most important thing here, as I said, is that they are percentages, they're not hard widths. If we define something as cold-one, we know that it's going to be eight and a third percent wide of whatever is containing it. Let's take a look at a little example. Let's say we've got a div and we've given it the class col-four. If we look at col-four, we know that it's going to be like 33 and a third percent of whatever containing it. Let's imagine that that comes out at 100 pixels. Because even though these styles are defined as percentages when they come to be rendered inside the browser, they are going to end up an actual pixel width depending on the size of the thing that they contained within and the size of the browser page. That's going to change every time we change the size of the browser page. If you make it very wide, maybe it's going to be 200 pixels. If you make it very narrow, maybe it's going to be like 50 pixels. The point is that we know that it's a col-four, it's going to be 33 and a third percent of whatever it's sitting inside. Now, if we go and put another column inside our col-four div, and we give that a class of col- nine. Now, if we go look at col-nine and we can see that it's 75 percent. This means that col-nine is going to be what's going to occupy 75 percent of col-four. If col-four is a 100 pixels, that means col-nine will be 75 pixels wide. This is why it's valid, but maybe a little confusing to see columns with big numbers, inside columns with little numbers. What we're saying is it's going to occupy a certain percentage of the thing that's containing it. The next thing we need to consider are Bootstrap screen sizes. Now, you see running across the top right-hand of the screen here we've got col-three, col sm three, col-md-three, col-lg three, and col-xl- three. These sm, md, lg and xl all stand for small, medium, large, and extra large respectively. Any screen that's less than 576 pixels wide, will be treated as an extra small screen. That means that a col-three, for example, I've used three as a convenient example because it's got a nice round number, 25 percent. We know that col-three will always have 25 percent width on an extra small screen. But for small screens, for medium screens, for large screens and for extra large screens, that won't be treated as column zero. That'll be treated as 100 percent wide columns or columns with a width of 100 percent. If we look at the next screens, every screen that is above 576 pixels, then col-three, which is extra small, will still be treated as a column, col sm three, small. Will still be treated as a column as well, still gets 25 percent width. However, medium, large, and extra large columns will be treated as 100 percent width columns meaning that when they appear as columns, they'll be stacked up on top of each other. But if we go up another size, we can say that our screen size now is 768 pixels. Anything that's 768 pixels or wider, the extra small column would be treated as 25 percent wide. The small column will be treated at 25 percent wide and the medium column will be treated at 25 percent wide, but large and extra large columns won't be. Then we can keep on going up like that. We've got a large screen defined as 992 pixels and then an extra large screen defined as 1,200 pixels. Once again, it's not really the point to remember these hard defined values in Bootstrap's CSS. The point is that we've got these handy mnemonics, sm, md, lg and xl that we can use to say; well on large screens I want these columns to appear, but on anything small, I just want them to be stacked up on top of each other. Then down for extra small screens, we can say, well, I'm going to use this col- three because I want it to always be a column no matter what. I know this is like quite a complicated slide to be looking at lots of numbers and it might not seem super intuitive for you, but it's here to really spell out the way that different screen sizes and different column definitions work. In the very next lesson, we're going to be looking at how we can use columns for different screen sizes to change the way things look as we view our content on different sized browsers. We're going to have a practical demonstration of how this works coming up next. 11. Add a data table with small columns.: Hello and welcome back in today's video lesson, we're going to see how we can use Bootstrap 4 to implement a data table in our PSD designed in our first design of this web page. What we're going to be doing is implementing this little table that's on the right-hand side of the page. It's more in the middle to the right. It's got five columns in total, but four columns of data, the headings and name, impressions, responses and conversion, and then in the fifth column we have some little icons with doing things to add data rows. In today's lesson, we're not introducing any new bootstrap concepts or ideas, we're just going to be putting into practice the things that we've covered already. The first thing we want to do is implement some headers for our little data table. Really that's just going to be an outer div, which will be a row containing four div s for our headers. I'm going to pop those into our code right now, and then come back and apply our styles to them. Here we are backing out codes, you can see our initial implementation of our right column here, and it has just this H 1 forms inside it. We're going to start what will be in your row once we apply at some styles to it with this div here and inside that div we'll have four more div s, for our column headings. Inside each of those we'll just put the name of our columns. We've got name, impressions, responses, and conversion. Now you can look in the browser and you can see our column headings are displaying like normal div s just exactly as we would expect. Heading back to presentation, we can see we are going to assign a row class to the additive, and then here we can see we are combining two columns styles to the first div, so that's the name and for the rest of them we'll give them a call too. We've got another style there called text right. This is a Bootstrap defined style which just aligns without texting in this particular div to the right, and that's the standard practice for data tables that have numeric values, we'll align them up along the right of the column. But returning to our first div, with call col md- 3 col- 2. What does this mean? Well, that means on a medium screen that this column is going to occupy three columns spaces, but on an extra small screen called dash two, then it'll only occupy two column spaces. This is where the flexibility of Bootstrap's column styles come in because we can apply a number of different widths to the one column and have that changed depending on the size of our screen. I'll go and apply the styles to our column headings right now, and there we go off this run through and apply those quickly. We can look at our browser again, give it a refresh, and there are how columns spacing across the screen as we expect. If we start to equalize this up, you can see we've got a little bit of a problem here where they're running into each other, that's not great. This is another one of those things we're going to fix when we get to apply custom styling, but you can see what's happened here is that name is now right way down the bottom here you can see name is occupying much this space than it was previously. It's occupying an equal amount of space across the width of that table as the other columns. Whereas once it's a little bit bigger, it gets relatively more space. This is our column three versus column two styling kicking in. All we have to do is go and define some entries for the data in our table. This is what a data row in our table is going to look like. We are going to have an outer containing div and then four div s for our data. They will lineup with that column headings, and then one extra div for our icons and I'll just run straight through and look at the classes that will apply to them right now. You can see the first div is going to be a row and that the other div s after that, and they're going to be the same as our headings because we want that data to line up underneath the heading so we apply the same styles. I'll actually go through and do those ones right now before we get into our icons. Really, all I need to do is take this part, make a copy of it, and then put in some data and say any LP 1 and it's had 2034 impressions and 1017 responses which is going to come out to a 50 percent conversion rate started to make things easy on myself. You don't want to see me here sitting here and try to work at a 34 percent conversion rate from 2034 impressions If we go and check at how that looks in a browser now, give that a reload and as you can see, we've got LP 1, 2034 impressions, 1017 responses, 50 percent conversion rate and everything is lining up nicely. It's looking pretty much how we'd expect, and if we squeeze this up some more, you can see our text running. It takes head texts running into each other, but we can see that our columns are lining up nicely still. What are we going to do with icons? They're always going to be a column three, so they can take up three column widths all the time. I'm going to go popup into the code as well. It's time to put out our icons into our code for whom and here they are. We've added one more column to our row, and this is quite similar to what we've done in the navigation. Then we've got a series of H tags containing an I tag for material icons, and we're using whichever material Icon name is appropriate for that action. How does that look in the browser? We've got our icons in there hanging off the end of our little table. There's a couple things to note here. One is that we didn't expect to show all of these all at a time. This little dot is there to say, hey, wait, there's more, come take a look and so when you go and mouse over that thing or click on it or something like that, the other things will appear. Really, we want them to appear when we mouse everything. This is one of those custom styling things we're going to add toward the end of the class, and the other thing to note is that this is like a super artificial way to display this data because you wouldn't never taught it in by then this obviously live data. This is a part of a web page, so it would be filled in by data from a server somewhere, but way of implementing it now as HTML, just because this is a great thing for us to practice and to learn about. This is often the way we would do this work anyway with implemented as an HTML kind of Prototype, and then grab the data bits out of the middle of the HTML and implement that on the server side. It's really not that crazy after all. Let me put a few more rows of data in our table to make it look a bit more like a data table. There we go, I have gone and posted in a bunch of stuff that I saved earlier. Again, if we check this in our browser, there we go. Here's a little data table without icons and out of various pieces of data. In our next lesson, we are going to be adding our little input controls next to foams up here. We add these search and add a new form. Controls that are in our web page design. 12. Creating Bootstrap input controls.: Hello again. In this video lesson, we are going to see how we can define some input controls using Bootstrap 4. So here is a little web page design and next to our Forms heading, you can see that we've got an input with a little magnifying glass in it, which is for search, and a button called Add New Form, which we would guess is by adding a new form. So we'll see how we can implement those two right now. First of all, here is our HTML mockup for implementing a little input controls. When you putting one of them inside a form, because really in a situation like this, that Add New Form button isn't going to submit anything to a server. It's just going to open up a little pop-up or a new page for us to put things into a form and then submit that to a server. So it's just there to display a similar HTML. But such input that, is going to submit a query to the server most likely, and then the server's going to send back some results. So we want to put that inside a form. Again we're just implementing like an HTML prototype today. So we're not going to be implementing any search functionality, but this is how we'd want to organize our HTML so that we can plug in that search functionality. So the next thing I'm going to do is put our HTML mockup into our source code, and then after that we'll apply some styles to it. So here we are in our code and I'm looking at our Forms heading, which is like the first thing that we see in our right column. All this is going on the same row. So I will put it inside the row div immediately after our Forms column. So the first thing we're going to have is our Form. This might seem counter-intuitive. But this is the way it's going to have to work, and this is the way Bootstrap styles work at the moment. You'll see what I'm talking about in a moment. Say Input, then obviously [inaudible]. Then after our Form we have another div. This is where our button goes, Add New Form. Just let me check our mockup. Yes, I used Title case for that. So let me change that. Let's get back to our presentation and see what kind of styles we can apply to our Form and our inputs. First of all, we are going to give our Form, the form inline class. If you don't remember, in HTML, all our elements are either block or inline elements. Inline elements line up horizontally, side-to-side. Block elements line up vertically, top-to-bottom. But we want our Form to behave like an inline element because we want it to appear on the same line as our other inputs and as the h1 next to it. So we'll give it the form-inline plus then will have a form-group followed by a column div. To me this seems backwards. I think that our column should be like the containing element and the form should be inside it. But believe you me, the styles don't work out very nicely if we do it that way, and this is currently how the Bootstrap docs recommend working with Forms. We've put out column inside the form and then we have our input element. After that, we've got our containing div for our button, which is just going to be a column of width three for small screens. So let's go and put those into our HTML and we'll see what we get. So our form is class on inline, and div is going to be form-group and then we have a class of three columns on a small screen. Then we'll have the same thing for this guy. So we'll go and load that in our browser. Reload, and then you can see what we got that form, and you can see what's revealed all over the place once again, but who fixed that without styling. So that's pretty much all that there is to it for implementing our input controls. In our next lesson, we will implement the footer and then we'll be done with our bootstrap part of the implementation of the page, and then we'll go on to our custom CSS to get it to match the design that we started with. 13. How to create a page footer in Bootstrap.: Hello again everybody. In this lesson we're going to be seeing how we can use Bootstrap to implement a footer in our web page. Now this is another one of those lectures. We're not going to be exploring any new Bootstrap concepts, but we will be seeing how we can use it to implement our footer which is that part at the bottom of the Web page right there. Now if it is just going to repeat our main website navigation, and it'll have a little copyright notice at the very bottom. Let's see how that looks in our HTML. Here we have it. We start off with a enclosing footer tag, the HTML five footer tag. Then we have an enclosing div, which is going to have a class of container fluid. Now in bootstrap, we have two kinds of containers. We've got container on its own, which is a fixed width, and then container fluid which is the full width of the page. We want our footer to be the full width of the page in this case. After that we're going to have a row and then a column we've also assigned to it, which is a way of saying we want our margins to have a value of auto, which is a way of centering them. After that we will have another row then another centered div, and we're done. Let's put that right into our code right now. We'll put that below our container that contains all other columns that picture that text that form the data table. All of that stuff and we'll start with our footer right here. If I can spare us all from my typos. [inaudible] equals container for the lead. When also had our root, and then we'll have our class equals mx-auto. Then we will close off that div. Then we're going to repeat that exact same structure again. For our next row I will put that right there. This is basically this structure that we need for our footer. Now what are we going to put inside it?. Really, it's just a repeat of our main navigation. We've got 1, 2, 3, 4, 5 links. Pricing about FAQ blog and contact and HRFs to pound values. Pricing that as a cube blog contacts in the real-world day they would be leaking out to other pages on our site. But for our prototype we'll stick with these ones. Then we need to put in our copyright notice, which is going to be two spans.One with the copyright symbol the other with our brand, Copyright 2017. If we take a look at how that looks in our browser, and there we go. We've got our passing it that if you block contact and then the brand 2017, of course this doesn't look like our mock-up, but in the very next lesson we're going to go and apply some CSS to this implementation to make sure it matches our original design. 14. How to customize a Bootstrap web page.: Welcome back everybody. In this final lesson, we're going to go over the custom styles that we can apply to our web page to make it match our issue web design, as you can see, we've got a bit of work to do, but it won't take too long. I'm going to be running through these changes fairly quickly. There's a few of them, but mostly they are pretty small. You don't have to worry about taking notes or anything like that because I'll be providing the final CSS file as a part of the project resources. You can refer back to it later. Here we are with the code. So far, I've got my index.html file on the left side here, and on the right side I've got a file code form-admin.css, which is empty at the moment, this is where our custom CSS is going to go. Now I've created a CSS sub directory in my project folder, and we shall refer to new CSS file even though it's got nothing in it from our index HTML file. That's the very first change I'm going to make. Instead of HTTP as Google fonts, etc. I'm just going to put our form-admin.css right there and save that. The very first thing I'm going to do is shove our site navigation just across a little bit and I will actually use a bootstrap class to do then and this is one of the classes that we haven't covered before. It's called offset-md-4. This works just like a column except it's not something that we put things into, we use it to push things across a certain number of column spaces. In this case, we want our nav bar to be shoved across four spaces from the left. I'll put that in there and then I'll see how that's looking in the code to make sure it's having the effect that we want. Here we are, that web page, save that and reload it rather ,and we can see that our site navigation has been pushed across, which is what we want and the next thing that we want to do is add some changes to the font using for the web page in our design, we are using a font called latter, and you've got three or latter. I'm not sure how to pronounce that with them. We've got three different ways for it. I understand that in this from the Google fonts, and then we set it in our body and set the body font size. Once again, I'll check it out in the browser just to make sure there's some change, and there we can see that I have found has changed, and the next thing that we want to do is finally gets in color into this navbar at the moment, it's very pallid looking and our design, as you can see, uses this blue, light green background color. We better put that in as well. There it is. What do we got here? Well, the first thing we're doing is actually setting the font-weight for the navigation because it's actually a little bit larger than the body text. After that, we're actually getting into setting our background color for our navigation. I'm defining a new class called navbar-brand-bg or navbar-brand-background and setting the background color to this blue greeny value, and after that, we saying any nav link that's inside navbar which is inside navbar-brand-bg set it to white. Then we have a similar rule for when items in the navigation bar are being hovered over or our links having hovered. Then we set them to darker blue, green color. Just to give a bit of feedback to the user that something will happen when they click them. But all this referencing this new class means that we need to add it to our HTML. Here we are, and I'm just going to add that class to navbar ,and it'll be navbar-brand-bg. We'll take a look at that in our browser, again reload and, isn't that exciting. Finally, a colorful background. But if I close up my browser, I think we're going to run into some problems. When we change to our yeah, responsive navigation. Look at that. We've got this peculiar blue band going across the top there, and everything else seems to be an order which is good. Happy to say that however, we want to do something about this blue green band that's going across the top there. In our responsive navigation mode. So I need to do something just a little slightly non-obvious here, which is additive class equals navbar-brand, and then put an empty space in there and close that up, and really what we're doing is taking advantage of Bootstrap's classes that are all set up to work together nicely, so our toggle button is set up to be a certain height and this navbar brand class is set it to be a certain height, and without me going and hand coding that height value into our custom CSS, I can take advantage of navbar brand and let it do that for us. Click reload, and there we go. So navigation is looking just a little bit more healthy now, and beautiful. I'm feeling better about the way things are looking already. So the next thing we want to do. Is if you take a look at our little user icon here, sitting there looking perfectly happy with the rest of those icons. But if you check out our web design, we can see we've got this little circle behind the icon. So I'm going to put something in for that right now, and home here we go. So there is a couple of things happening here. One is that we are defining a class user-icon, setting the background color for it, sending a foreground color for it. Setting the border radius to 50 percent is basically make a little round circle and manually setting the width, offset it a little wider and higher in the web implementation than it is in the design. Just because that's going to need to work a bit better for our responsive styles and offset some padding left on it as well to make sure our little user icon is centered in the background and we have dreaded important after that. Just because there are some more specific styles hooking into our icon, overriding our padding left. Rather than making a artificially specific CSS rule for our user icon, I'll use the important keyword there, setting a background cover for the hubbub, and finally, we only actually need these padding if we are in our responsive mode. Meaning if our pages being viewed on a smaller device, then we need this extra padding. But if we are on a large device, one that is 768 pixels or wider, then we don't need any extra padding. So I've got this little media query right here, just to turn the peg off on the left-hand side, and all we need to do now is apply our new class user icon. So we're going to apply it to a tag, to the eye, but see the a tag user icon. Save that, head back to the browser, and I already related so you can see it there now, and if we close that up, get to our responsive navigation. We can say that it's working in there as well. Is this is what we want? Coming up next, it's time to add just a bit of breathing space to our layout. Things are looking squashed up, and now web page at the moment, and I think that if we apply some spacing to our row class, then this will look a lot better. So one aim, I'll say it's probably too much. Now I think that's good. So we're going to apply one aim of Head-space to our rows. So in our CSS, I'm going to, doesn't really fit into any nice categories. I'm just going to put it at the top here, say dot. I Don't like it there because it's mixing them on the HTML elements. Create more space in layout, row. So half an em. Save that, get back to the browser. Reload. I don't know, I said I'll do a full em, didn't I? Yeah, I think a full em will be better. One em. There we go. I'm a lot happier with that. Okay. Look, I'm happy that we're getting a bit more space in our layout. The navigation is looking a lot nicer. Now it's time to deal with our footer, I think. It's hovering in space there, it doesn't have a background color. Time to fix that now. The first thing I'm going to do is adjust the styling for our body, there it is. What are we doing here? We are setting a minimum of height to 100 vh. Vh is a vertical height unit. These are 100 of them which is basically saying that the minimum height of our web page will be the height of our browser screen. Then we're setting display to flex them in and to flex-direction to column. This is all in aid of making our footer stick to the bottom of, not stick to the bottom of the page, it won't be sticky but it will be placed at the bottom of the page even if the page content isn't enough to fill up the entire height of our browser. That's all well and good but now we need to have something for our footer. Let's put it here because it's an HTML element. We'll say "margin-top: auto". Okay. Let's see how that works. There we go. It's being shoved, brought down at the bottom. It's a bit too close to the bottom now really and it needs its background color and other styling as well. It sounds big enough, I'll put it down a little bit just to be below our nav, HTML styling, footer, if that isn't too obvious. Besides giving it a margin top, I've reduced the font-weight to 300 to make that text at the bottom look just a little bit more classy. I've introduced the background color, a minimum height of 100 pixel, padded out a little bit. I've set the color to white and added a bit of padding to our links just so that it isn't look so crowded, I've insert the bottom. I've introduced a couple styles, our brand text and copyright. So our brand text is that little thing that says "The Brand", I'm making that quite heavy. Copyright is for the copyright symbol or the whole. Actually copyright text, I want it to be a bit smaller than the rest of it. Actually we have to use this successfully. I'm going to have to rearrange our footer a little bit which is just to nest these spans together. So just like that. I might just put the whole thing on one line there just so that we can see quite easily how that looks. I'm going to save that, get back to the browser. I've saved it. Now I reload and there's our web page footer. That's great. The next thing I want to address is this image, The Brand. If you can see us poking around the other day, we did developed our tools. I'll close those now. You can see that we've got this image, The Brand, and I feel like it's a bit too big. I'm not keen on that super massive size of our main logo. So I'm just going to put a restriction on the maximum size of that. I think where it sits like there, that's good. I'm going to inspect that again. I can see that that's like 286 by 298 pixels. Now go back to the code and I'm going down to the bottom here. I think I'll call it ID image. We've got ID for that because there is only if it's going to be one of them, I saying, max-width: 297px. Okay. Yeah, finally we can get rid of this width 100 percent and say, id equals "id-img". ID is short for identity as in this is the brand identity. Let's get back to the browser, reload, and there we go. It's not quite such an overwhelming size but look at that. Now it wants to run into our data table. How big it has to be before that does not happen. I'm curious about that. Yeah, I think that will do, 245 pixels. That will serve us well. I've done a quick reload there. Here is our little brand image behaving itself nicely all the way through. Fantastic. Now the next thing we want to do is get these inputs under control. I'm talking about these guys. At the moment, they look like a absolute disaster. Now I'm going to have to rearrange them a little and I'm going to move that button inside the form with the text input. That's not the greatest thing in the world because it's not really, as I said, with the form whenever I submit that form. But for the sake of avoiding putting lots of very specific styling on that button then shut it down in the line, I'll take advantage of the free defined styles in our form. I'll also add some styles to make that button just a bit less gross and to match the rest of our design anyway with the rounded corners. The first thing I'm going to do is head on down to the form. I don't think we want this form group anymore either. I'll put that there, it should go in here. These guys come back a bit. That's one of my best. That's the end of a row. Let's see how we look now. Terrible. Probably we need to make this a little bigger. There we go, now it's working. We're looking better already. What happens when we squish this up? Yeah, that's good, still good, and happy days. That's a little irregular. The widths of those things, but we will sort that out in a moment. Now we need to add some style just to make our inputs look a little bit more pretty. What have we got here? For both input and button, we are setting the margin to auto. We are setting the border radius to 25 pixels which will give them a nice round border on either end, and padding to five pixels to give them a bit of space inside the input. Also, we are setting our box shadows to none giving them a nice little very fine light gray border, and setting the width to 100 percent so they take up the available space. Finally, I've made an add form button ID rule where we've got border set to zero with 100 percent, no background image, background color which is a lighter bluey, green color. Then finally we've got white text. I'm going to go ahead and apply that to the button. Reload, and our inputs are looking a lot nicer now. Now there's one thing that's missing, which is this little magnifying glass here. We want it to sit inside the text inputs. As you can see, it's not there, so we better go and do that now. One thing I'm going to do is add this big, hairy CSS styling rule called search control. Basically what it does is a bunch of stuff to position that magnifying glass within the text input. What we need to do before that works is actually add a little icon to this by the form material icons, and then search control. That has not worked at all. Did I save the CSS? No. Clearly, I'm not qualified to drive more than one editor window at a time. Reload. There we go. Finally. If I don't cover that, I'm going to fix that. What I'm doing is I'm making a start of a tool hint, color set to dadadada. There we go. That's looking a little bit better. I'll use that on our little search icon, tool hint, check it out in the browser. Great. Now it's the right color. So our inputs this time look a lot better. Just checking the little search icon is behaving itself, and it is throughout. Fantastic. Now the next thing that's missing is pretty straightforward, just a little border, a little line running underneath our data table headings. We want some separation in a line underneath Name, Impressions, Responses, and Conversion. We get them in data table territory now so I'll mark that, and I've created a style called lo border, which has a little bit of padding and a border on the bottom which is just another light gray. To use that, I'm going to stick it underneath here. Div class equals col md 11 and lo border, and that can just be an empty div. Fantastic. There's a line separating our column headings from our column data. Now the next thing we need to look are these icons over here. They're looking not quite right. They are supposed to be hidden. This little dot-dot is supposed to be an indication that there are more icons to see as I mentioned earlier in the class. So we better get on with hiding and showing these icons. What I've done is I've added some more styles that will relate to these icons and I'm going to call them admin tools. The first thing we do is add some color to them and set display to none, which is to say we hide them, but when we're hovering over something called a data row and our admin tool is going to become display inline block. This is a way of saying these things are hidden until we hover over them, then we show them. However, we've got this little hint that is three little horizontal dots that are there to tell us that there's more to see, but when we hover over our line, we want that to be hidden, so we set display to none. Then finally we set some alternative colors for our admin tool icons, a lighter gray and then a darker gray when we hover over them. Before we do anything else, we will have to put these things into action by actually assigning these classes to our icons, so what we're going to have our admin tool. I'll do one on one to start with, just to make sure it's all working and then I'll work them in for the rest of them. This is going to be a tool hint, like our little magnifying glass. Also, our row should also be a data row so that we can accurately select our icons. We'll give that alert and look, we can see that little set of icons disappeared and when we go and hover over them, we can see the other icons there. They appear and a little more icon has disappeared. There we go. This is what we want. So I'll quickly apply that to the rest of our data rows. Finally, I'm sure it's going to work now. Fantastic. If we squash this up, are we still working? Yes. There we go. We're pretty much done with our custom styling for the page. If you haven't already, please do post your project into the projects gallery. I would love to see it as always and I bet everybody else involved in the class would love to see it too. It's a great opportunity to compare notes, get feedback, and get some help if you need it. I'm really looking forward to see what you've been working on. 15. Class review.: So we've come to the end of the class. It's been super-fun for me and I hope you've enjoyed it and found it really useful as well. During this class, we've covered what Bootstrap is, how to include it in a regular webpage, how Bootstrap's navigation containers, rows and columns work, how we can combine those components together to create a functional webpage. Now if you haven't already, please don't forget to post your project. You can get feedback on it and I really can't wait to see it. Also remember, I'm always available to help out; if you run into any problems, just let me know. Once again, I really hope you've enjoyed the class and I look forward to seeing you again in the future.