Home »
Web programming »
Bootstrap
Create first webpage with Bootstrap
Create First Web Page with Bootstrap: In this article, we will learn how to create first webpage with Bootstrap?
Submitted by Bharti Parmar, on July 31, 2018
Create First Webpage with Bootstrap
In the previous article, we learned "how to setup bootstrap?" for a web project. If you haven’t gone through that, it is recommended to read it. Now, in this article, we will learn how to create the first responsive webpage using bootstrap? At any time, if you find any doubt just write it down in the comment section.
Create HTML doctype
Always include html5 doctype from the beginning of the program. Also, include HTML starting and closing tag with lang attribute and set lang = "en". This ensures we are using the English language.
Example:
<html lang="en">
HTML Code
<!doctype html>
<html lang="en">
<head>
<title> Page Title </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
< !- - Local file - - >
<link rel="stylesheet" href="Path\bootstrap\bootstrap-4.1.3-dist\css\bootstrap.min.css">
<script src="Path\bootstrap\bootstrap-4.1.3-dist\js\bootstrap.bundle.min.js"></script>
<!-- Online CDN -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
< !- - Do whatever you want to show on your display webpage. - - >
</body>
</html>
Note: Please pay attention that we have both ways implemented into this HTML script. But, you can choose to go for either offline or online bootstrap file hosting, depending on your preference and requirement.
Explanation:
- The <title> and <meta> tags must be defined under the <head> tag. All of the tags, I mean the complete script must be enclosed within the <html> tag.
- Head tag:
Head tag is used for heading. <title>, <meta>, <styles>, <scripts> tags and more are placed between the <head> tag. You cannot define more than one head tag in one document.
Ex: <head> ... </head>
- Title tag:
Title tag is used under the tag for giving the title to our page or document. It displays title to our page and is shown in the title toolbar. We can use only one title name in one document.
Ex: <title> page title </title>
- Meta tag:
We have to know about metadata first for knowing more about the <meta> tag. Metadata means data about data i.e. short description about large data. Meta tag contains a short description of the current page.
Some of the Metadata tags
1) <meta charset="utf-8">
It is used to define character set encoding for the current page. "utf-8" is the most commonly used character encoding, and supported by most of the web browsers.
2) <meta name="description" content="about bootstrap tutorial">
It provides short description of current page.
3) <meta name="keywords" content="bootstrap,html,css">
It is useful for search engine optimization. You can pass keywords (e.g. bootstrap, html, css) that can be used to search your website through search engines.
4) <meta name="viewport" content="width=device-width, initial-scale=1">
This tag is a key tag that is responsible for rendering responsive design as per device.
Here,
- width=device-width - It will set the width of the page according to the device width.
- initial-scale=1 - It sets initial zoom level when the page is first loaded.
Conclusion:
In this article, we have learned about how to create a simple bootstrap webpage structure? This was mostly based on setting up the initial page structure for Bootstrap. We will learn about "bootstrap Grid system" in the upcoming article. See you soon in the next article. Have a great day! Happy Learning!