Quick links
Latest articles
Internship
Members
New...
Algorithms
Discrete Mathematics
Big data
Languages
C
C++
C++ STL
Java
Data Structure
C#.Net
Android
Kotlin
SQL
Web
PHP
Python
JavaScript
CSS
Ajax
Node.js
Web prog.
Programs
C
C++
DS
Java
C#
Python
Aptitude
C
C++
Java
DBMS
Interview
C
Embedded C
Java
SEO
HR
CS Subjects
CS Basics
O.S.
Networks
DBMS
Embedded Systems
Cloud Computing
Machine learning
CS Organizations
Linux
DOS
More...
Articles
Puzzles
News/Updates

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!






Quick links:
C FAQ(s) C Advance programs C/C++ Tips & Tricks Puzzles JavaScript CSS Python Linux Commands PHP Android Articles More...

Featured post:
Introduction to Linux (Its modes, Safety, Most popular Applications)
Linux Best Distribution Software (Distros) of 2018

Was this page helpful? Please share with your friends...

Are you a blogger? Join our Blogging forum.

Comments and Discussions



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com (2015-2018), Some rights reserved.