[Music] Welcome to Bootstrap! After watching this video, you will be able to: Describe Bootstrap and explain how to integrate Bootstrap into your Django template. Bootstrap is a free web front-end framework designed to facilitate web app development. It provides many well-designed and commonly used HTML and CSS templates to simplify Django template development. With the help of Bootstrap, developers can easily build stylized and interactive web pages. Let’s look at how to quickly add Bootstrap framework into our Django templates. Integrating bootstrap is simple. If you just want to use Bootstrap CSS style classes without downloading Bootstrap, you can simply add a link to the latest Bootstrap version hosted by Content Delivery Network, like `MaxCDN`, into the head element of your html template. That’s it! This is the simplest way to add Bootstrap. Now you can start using the CSS classes provided by Bootstrap. Web page development normally starts with layout design. Let’s design a simple course index layout to represent the courses in an onlinecourse app. Like many other webpages, our course index page has a navigation bar at the top, which contains links and items for navigating the site. Our navigation bar also has a form where users can submit authentication-related data such as sign in or sign up. Next is the main content of the webpage, which includes its main elements such as a list, a table, or a picture gallery. Here we will use a container to wrap content elements. We plan to present each course as a card. A card is a bordered box with padding around its content. It can have a header, footer, content, images, colors, and so on. To manage multiple course cards, we will wrap them into a card deck which creates a grid of cards which have equal height and width. In Bootstrap, we create a navigation bar with `navbar` class, with additional classes such as background color and how to extend or collapse the navigation bar to adapt to screen size. To add items such as a link or button to the navigation bar, we use the <ul> element with class `navbar-nav`, then add <li> items with nav-item. Here we added a simple home link with class nav-link to the navigation bar. Let’s preview the result. You see that a navigation bar with a light background theme is created. It only has one link item. Next, we add a form to the navigation bar for submitting authentication-related data. We need to create an inline form in which all elements will be inline and left-aligned. Within the inline form, we can add two input elements for receiving username and password. Here we use form-control class, which is a standard Django class for styling textual elements. Then we add a submission button stylized by btn and btn-primary classes, which create a standard Bootstrap blue button. Finally, we add a Sign-Up link that jumps to the registration page, stylized by btn and btn-link classes. In the result, you can see a sign-in form has been added to the navigation bar. We have now finished the header part of our course index page. Next, we will start building the main content of the page. We want to include the page in a div element stylized by container class. There are two types of containers in Bootstrap. The first container class has a fixed width. The other one is container-fluid, which spans the entire width of the parent element. Within the container class, we create a div stylized by `card-deck` class. The card-deck class creates a card grid to arrange our course cards. Then we create a card div to represent a course card. Each course card has an image element to display a course image, a card body which includes a card title to display the course name, and card-text to display the course description. The result is a nice course card deck that is rendered with each course presented as a card. Another commonly used content template is table, which displays tabular data such as a student list. To create a Bootstrap table, we create a table element styled by table class. Then we create a table head with a t-head element to define table headers such as firstname, lastname, and email. Next, we add a table body to display user objects for a course, with each table row, or tr, representing a user and each table column, or td, representing a user attribute such as first name, last name, or email. The result is a student table showing a list of students enrolled in a course. In this video, you learned: What Bootstrap is and how to integrate Bootstrap into your Django template. You also learned about some common Bootstrap templates: Navigation bar with a Sign-in form, Container, Card and card deck, and Table.
