Part of designing a website is thinking about how different UI elements and menus are positioned on the page and in relation to each other. Bootstrap is a collection of pre-written code chunks in CSS and JavaScript that allows you to create websites more quickly than if you had to create every bit of code from scratch. Building websites from scratch every time will be quite time-consuming. This is where Bootstrap comes in. In this video, you will learn how to create a simple Bootstrap webpage. To do that, I am using the file with the Bootstrap libraries I have created. Let's begin by setting up the layout. The first element I need to add when setting up a Bootstrap website is the container elements. I need it before I can use the Bootstrap grid system. I add HTML div element and apply the container CSS class provided by Bootstrap. Next, I add a row for the contents. Similar to what I had in the container elements, a row is a HTML div element, which uses the row CSS class provided by Bootstrap. Under this row, I want to add two columns, one for the menu items and one for the prices. I add two div elements with the col CSS class, one for each column. Col is short for column. Now I want to name the columns. I do this by adding heading tags in each div. Within the first column div, I add a heading 1 tag or H1 tag. I type the name of the column, our menu. The second column div element I type prices in a H2 tag. Under the our menu column, I will add the name of each dish, the ingredients used, and an image. First, I add a heading 2 tag below the our menu H1 tag, and inside it, I add the name of the dish, falafel. On the falafel H2 tag, I add a paragraph tag or p tag. Inside this tag, I list the ingredients, chickpea, herbs, and spices. Now to add an image of a falafel, I add the IMG or image tag and inside it add the SRC or source attribute as it is known. In the source attribute, I enter the name of the image file I want to link to. I type falafel.jpeg. I now add a CSS class called IMG-fluid or image fluid, as most developers call it. Instead of having to manually set the image size, the IMG-fluid class will ensure my image scales to its parent column's width. Next, let's add another dish. I add another heading 2 or H2 tag, and inside it, I add the name of the dish pasta salad. Under the pasta salad H2 tag, I add a paragraph tag or p tag, and list the ingredients, lettuce, vegetables, and mozzarella. Now I add another image tag and inside it add the source attribute. In the source attribute, I enter the name of the image file I want to link to. I type salad.jpeg. I also add the same CSS class image-fluid. Now I save the file by pressing the keys Control and S, or if you're on a Mac Command and S. Next, I preview the webpage in live preview. The dishes are now displayed in columns and the images are sized correctly. Now let's add the price table. Under the price column, I add a HTML table tag and apply the Bootstrap CSS class table. Inside the HTML table tag, I add two table row tags or tr tags. This will create a row for each of the dishes. Then I need to add table data tags or td tags. The table data tags to find the contents of table cells. I'll need to add two of those inside each table row, one for the dish name and one for its price. In the first row, I add falafel to the first td tag, and in the second td tag, I add the price, let's say $12. I do the same with the second row. I type pasta salad inside the first td tag and the price of $10 in the second td tag. I save the file again by pressing Control and S or if you're on Mac Command and S. Next, I preview the webpage in live preview. The table structure now displays using Bootstrap's table style. You've now learned how to make a simple webpage using Bootstrap.