Scribd
Upload
5 views2 pages

Subtitle

This document provides a step-by-step guide on how to create a simple webpage using Bootstrap, a framework that simplifies web design with pre-written CSS and JavaScript code. It outlines the process of setting up a layout with container elements, rows, and columns, as well as adding menu items, images, and a price table. The instructions include specific HTML tags and Bootstrap classes to ensure proper formatting and responsiveness of the webpage.

Uploaded by

Zubair Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views2 pages

Subtitle

This document provides a step-by-step guide on how to create a simple webpage using Bootstrap, a framework that simplifies web design with pre-written CSS and JavaScript code. It outlines the process of setting up a layout with container elements, rows, and columns, as well as adding menu items, images, and a price table. The instructions include specific HTML tags and Bootstrap classes to ensure proper formatting and responsiveness of the webpage.

Uploaded by

Zubair Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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.

You might also like