Aditya Srivastava ECE Report

Jaipur Engineering College and
Academic Year- 2021-2022

Research Centre, Shri Ram ki Nangal,
via Sitapura RIICO Jaipur- 302 022.
Industrial Training Report

On
“Web Development using Bootstrap”
Submitted in partial fulfillment for the award of degree
of
Bachelor of
Technology in
Electronics And Communication
Engineering
Submitted By Guide
Aditya Srivastava Ashish Sharma
19EJCEC007 Industrial Training
coordinator, ECE
Department of Electronics And Communication

Engineering Jaipur Engineering College &
Research Centre Jaipur, Rajasthan
2021-22
1
CERTIFICATE
This is to certify that the industrial training entitled “Web Development using
Bootstrap“ is the bonafide work carried out by Aditya Srivastava student of B.Tech. in
Electronics And Communication at Jaipur Engineering College and Research Centre,
during the year 2021-22 in partial fulfillment of the requirements for the award of the
Degree of Bachelor of Technology in Electronics And Communication Engineering
under my guidance.
Name of Guide Ashish Sharma
Designation Industrial Training Coordinator , ECE
Place: Jaipur
Date: 24/12/2021
2
JaJiapiupruEr AAcacdaedmemicicYYeaera-
nEgnignieneereinrigngCCololellgeegeanad r2- 022012-12-0220222
ndRReseesaeracrhch CCenetnretr,eS,
hSrhirRi RamamkikNi Nanagnagla, lv,
ivaiaSiStaitpaupruara
RRIIICICOOJaJiapiupru-r3-
VISION OF ECE DEPARTMENT 0320202022.2.
To become a renowned Centre of excellence in Electronics And Communication engineering

and make competent engineers & professionals with high ethical values prepared for lifelong
learning.
MISSION OF ECE DEPARTMENT
1. To impart outcome-based education for emerging technologies in the field of Electronics And
Communication engineering.
2. To provide opportunities for interaction between academia and industry.
3. To provide a platform for lifelong learning by accepting the change in technologies
4. To develop the aptitude for fulfilling social responsibilities.
3
PROGRAM OUTCOMES (POs)

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and Computer Science & Engineering specialization to the solution of complex
Computer Science & Engineering problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex Computer
Science and Engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex Computer Science and

Engineering problems and design system components or processes that meet the specified needs
with appropriate consideration for public health and safety, and the cultural, societal, and
environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research

methods including design of Computer Science and Engineering experiments, analysis and
interpretation of data, and synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex Computer Science
Engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional Computer Science and Engineering practice.
7. Environment and sustainability: Understand the impact of the professional Computer Science
and Engineering solutions in societal and environmental contexts, and demonstrate the knowledge
of, and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms
of the Computer Science and Engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings in Computer Science and Engineering.
4
10. Communication: Communicate effectively on complex Computer Science and Engineering

activities with the engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make effective presentations,
and give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
Computer Science and Engineering and management principles and apply these to one’s own work,
as a member and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change in Computer Science
and Engineering.
PROGRAM EDUCATIONAL OBJECTIVES (PEOs)
The PEOs of the B.Tech (ECE) program are:
1. To produce graduates who are able to apply computer engineering knowledge to provide
turn-key IT solutions to national and international organizations.
2. To produce graduates with the necessary background and technical skills to work
professionally in one or more of the areas like – IT solution design development and
implementation consisting of system design, network design, software design and
development, system implementation and management, etc. Graduates would be able to
provide solutions through logical and analytical thinking.
3. To enable graduates to design embedded systems for industrial applications.
4. To inculcate in graduates effective communication skills and teamwork skills to enable
them to work in a multidisciplinary environment.
5
5. To prepare graduates for personal and professional success with a commitment to their
ethical and social responsibilities.
PROGRAM SPECIFIC OUTCOMES (PSOs)
PSO1 Ability to interpret and analyze network-specific, cyber security issues, automation in
real-world environments.
PSO2 Ability to design and develop mobile and web-based applications under realistic
constraints.
COURSE OUTCOMES (COs)

On completion of Industrial, Training Graduates will be able to-
● CO1: Generate the report based on the Projects carried out for demonstrating the ability to
apply the knowledge of the engineering field during training
● CO2: Demonstrate Competency in relevant engineering fields through problem
identification, formulation, and solution.
MAPPING: CO’s & PO’s

Program Outcomes (POs)
Subject Code Cos
PO- PO- PO- PO- PO- PO- PO- PO- PO- PO- PO- PO-
1 2 3 4 5 6 7 8 9 10 11 12
CO-1 3 3 2 2 2 1 1 2 2 3 3 3
5CS7-30
Industrial Training CO-2 3 3 3 3 3 1 1 2 2 3 3 3
6
ACKNOWLEDGEMENT
It has been a great honor and privilege to undergo training at Unschool, Hyderabad. I am very
grateful to Mr. Arpit Agarwal, Dr. V.K. Chandna, Dr. Sandeep Vyas for giving his valuable
time and constructive guidance in preparing the report for training. It would not have been possible
to complete this report in a short period of time without their kind encouragement and valuable
guidance.
I wish to express our deep sense of gratitude to our Industrial Training Guide Mr. Ashish Sharma,
Jaipur Engineering College and Research Centre, Jaipur for guiding us from the inception till the
completion of the industrial training. We sincerely acknowledge him for giving his valuable
guidance, support for the literature survey, critical reviews, and comments for our industrial
training.
I would like to first of all express our thanks to Mr. Arpit Agrawal, Director of JECRC, for
providing us such a great infrastructure and environment for our overall development.
I express sincere thanks to Dr. V. K. Chandna, Principal of JECRC, for his kind cooperation and
extendible support towards the completion of our industrial training.
Words are inadequate in offering our thanks to Dr. Sandeep Vyas, HOD of ECE department, for
consistent encouragement and support for shaping our industrial training in the presentable form.
Also our warm thanks to Jaipur Engineering College and Research Centre, who provided us this
opportunity to carryout, this prestigious industrial training and enhance our learning in various
technical fields.
Aditya Srivastava
19EJCEC007
7
ABSTRACT
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end
web development. It contains CSS- and JavaScript-based design templates for typography, forms,
buttons, navigation, and other interface components. The work presented here is the outcome of an
Industrial training on Web Development using Bootstrap. Below is the outline of experiences and
lessons learned.
8
TABLE OF CONTENTS
Certificate--------------------------------------------------------------------------------------------i
Vision and Mission---------------------------------------------------------------------------------ii
Program Outcomes (POs)-------------------------------------------------------------------------iii
Program Education Objectives (PEOs)---------------------------------------------------------iv
Program Specific Outcomes (PSOs)-------------------------------------------------------------v
Course Outcomes (COs)---------------------------------------------------------------------------vi
Mapping: COs and POs----------------------------------------------------------------------------vi
Acknowledgement-----------------------------------------------------------------------------------vii
Abstract------------------------------------------------------------------------------------------------viii
1. INTRODUCTION---------------------------------------------------------------------------------1
1.1 What is Web Development? 2
1.2 Scope of Web Development? 3
1.3 What is Bootstrap? 4
1.4 Why Bootstrap? 5
1.5 Advantages of Bootstrap 6
2. Basics of HTML-------------------------------------------------------------------------------10
2.1 What is HTML? 14
2.2 What is HTML Element? 16
2.3 HTML attributes 16
2.4 HTML style 16
2.5 HTML Comments 17
2.6 HTML Forms 17
3. Basics of BootStrap-------------------------------------------------------------------------------21
9
3.1 Containers 21
3.2 Typography 22
3.3 Colors 23
3.4 Tables 23
3.5 Jumbotron 24
3.6 Buttons 25
3.7 Cards 27
3.8 Forms 28
3.9 FlexBox 32
3.10 Navigation Bar 33
4. Conclusion------------------------------------------------------------------------------------------36
10
Introduction
What is Web Development?

Web development is the work involved in developing a website for the Internet. Web
development can range from developing a simple single static page of plain text to complex web
applications, electronic businesses, and social network services.
It refers to building websites and deploying them on the web. Web development requires use of
scripting languages both at the server end as well as at client end.
Scope in Web Development?

The web is going to get even bigger and better with time. Web developers will continue playing
an important role. So having the skills to develop websites has several advantages.
● Job flexibility: The job of a web developer is highly flexible. You are allowed to work the
way you want to. If you are a team player, you can work full-time, or you can even go
solo by working as a freelancer. If you are into something else and earn some passive
income along with your primary job, you can work on a part-time basis as well. You are
free to choose whatever suits you best!
● It’s easy to begin: Even if you are not willing to be work with a company on a full-time
basis, there is still plenty that you can do as a freelancer. All you need is the right skills.
There are several online courses that provide you enough learning material and access to
lectures and live learning sessions from industry experts. You can join one of these courses
alongside your job. You can choose your own learning schedule and learn at your own
pace. Look for courses or online learning platforms that provide placement assistance.
11
● There are always more skills to add to your resume: HTML, JavaScript, and CSS are the
basic skills that you can’t do without as a web developer. However, if you are passionate
about it and want to further your career, there’s plenty more to learn as well, including
AngularJS, Ajax, PHP, Ruby, and more. If you are just starting out, you don’t need to worry
about these additional skills. However, to advance in your career, you will need to learn
these skills.
● Web development is interesting and fun: Web developers love everything about their work.
Web development is amongst those jobs that have a significantly higher job satisfaction
rate. There are several reasons that web developers are so satisfied with their jobs – salary,
work-life balance, and flexibility, to name a few.
● There are job opportunities aplenty: There are more jobs than you think in web
development. Whatever happens, online businesses will continue to build new websites or
redesign existing ones to stay competitive and relevant. Web developers will never run
out of jobs.
What is Bootstrap?
● Bootstrap is a free front-end framework for faster and easier web development
● Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins
● Bootstrap also gives you the ability to easily create responsive designs
12
Why Bootstrap?
Bootstrap is a surprisingly powerful and effective tool for developers building responsive websites
and web applications.
Bootstrap was launched as a mobile-first framework for web development. It is now one of the
most stable and reliable responsive front-end frameworks with a market share of over 16% of all
websites.
For those who are not familiar with the development frameworks, they are standalone starter
themes offering a standard set of pre-built yet customizable features and functions to speed up the
development of a website or application.
The main reason Bootstrap is so popular in the web design industry is its unique and compelling
features that empower developers to build well-functioning, fully responsive websites without any
hassle.
It is so easy to learn and use that even a novice developer with basic knowledge of HTML, CSS,
and JavaScript can get started with it in minutes.
Advantages of Bootstrap:
13
● Easy to use: Anybody with just basic knowledge of HTML and CSS can start
using Bootstrap
● Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
● Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
● Browser compatibility: Bootstrap 4 is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera)
Basic Of HTML
What is HTML?
● HTML stands for Hyper Text Markup Language

● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
● HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
Example :
A Simple HTML Document
<!DOCTYPE html>
<html>
14
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
● The <!DOCTYPE html> declaration defines that this document is an HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
15
● The <h1> element defines a large heading

● The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Attributes
HTML attributes provide additional information about HTML elements.
● All HTML elements can have attributes

● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"
HTML Style
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more. Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
16
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML
source code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server
for processing.
17
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
form elements
</form>
The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
18
Example
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The Submit Button
19
The <input type="submit"> defines a button for submitting the form data to a form-
handler. The form-handler is typically a file on the server with a script for processing input
data.
The form-handler is specified in the form's action attribute.
Example:
A form with submit button
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
20
Basics of Bootstrap
Containers
You learned from the previous chapter that Bootstrap requires a containing element to wrap
site contents.
Containers are used to pad the content inside of them, and there are two container classes available:
1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning the entire width of
the viewport.
21
Bootstrap 4 Text/Typography
Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
The default font-family is "Helvetica Neue", Helvetica, Arial, sans-
serif.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
<h1> - <h6>
Bootstrap 4 styles HTML headings (<h1> to <h6>) with a bolder font-weight and an
increased font-size:
Example:
22
Bootstrap 4 Colors
Bootstrap 4 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are:
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary,

.text-white, .text-dark, .text-body (default body color/often black) and .text-light
Example:
Bootstrap 4 Basic Table
A basic Bootstrap 4 table has a light padding and horizontal
dividers. The .table class adds basic styling to a table
23
Example:
Striped Rows
The .table-striped class adds zebra-stripes to a table:
Bootstrap 4 Jumbotron
A jumbotron indicates a big grey box for calling extra attention to some special content
or information.
24
Tip: Inside a jumbotron you can put nearly any valid HTML, including other
Bootstrap elements/classes.
Use a <div> element with class .jumbotron to create a jumbotron:
Example:
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
Bootstrap 4 Buttons
Button Styles
Bootstrap 4 provides different styles of buttons
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
25
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Button Groups
Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group:
Use a <div> element with class .btn-group to create a button group:
Example:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
26
Vertical Button Groups
Bootstrap 4 also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:
Example:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Bootstrap 4 Cards
Cards
A card in Bootstrap 4 is a bordered box with some padding around its content. It includes
options for headers, footers, content, colors, etc
27
A basic card is created with the .card class, and content inside the card has a .card-body
class: Example:
<div class="card">
<div class="card-body">Basic card</div>
</div>
Bootstrap 4 Forms
Bootstrap 4's Default Settings
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of
100%.
Bootstrap 4 Form Layouts
Bootstrap provides two types of form layouts:
● Stacked (full-width) form

● Inline form
28
Bootstrap 4 Stacked Form
The following example creates a stacked form with two input fields, one checkbox, and a submit
button.
Add a wrapper element with .form-group, around each form control, to ensure proper margins:
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
29
Bootstrap Inline Form
In an inline form, all of the elements are inline and left-aligned.
Note: This only applies to forms within viewports that are at least 576px wide. On screens
smaller than 576px, it will stack horizontally.
Additional rule for an inline form:
● Add class .form-inline to the <form> element
The following example creates an inline form with two input fields, one checkbox, and one submit
button:
Example:
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
30
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap 4 Form Inputs
Bootstrap supports the following form controls:
● input
● textarea
● checkbox
● radio
● select
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date,
month, time, week, number, email, url, search, tel, and color.
Note: Inputs will NOT be fully styled if their type is not properly declared!
31
Example:
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap 4 Flex
Use flex classes to control the layout of Bootstrap 4 components.
32
Flexbox
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses
flexbox, instead of floats, to handle the layout.
The Flexible Box Layout Module makes it easier to design flexible responsive layout structures
without using float or positioning.
To create a flexbox container and to transform direct children into flex items, use the d-flex class:
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Bootstrap 4 Navigation Bar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
33
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with the .navbar class, followed by a responsive
collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large,
medium or small screens).
To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add
<li> elements with a .nav-item class followed by an <a> element with a .nav-link class:
Example:

<nav class="navbar navbar-expand-sm bg-light">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</li>
34
</li>
</ul>
</nav>
35
Conclusion
Bootstrap has finally turned out to be the trendiest front-end design framework. The main reason
for its success is the huge number of resources accessible through it. It holds a very big online
community and help is easily available. Bootstrap is a surprisingly powerful and effective tool for
developers building responsive websites and web applications.Bootstrap was launched as a
mobile-first framework for web development. It is now one of the most stable and reliable
responsive front-end frameworks with a market share of over 16% of all websites. For those who
are not familiar with the development frameworks, they are standalone starter themes offering a
standard set of pre-built yet customizable features and functions to speed up the development of a
website or application.
36

Aditya Srivastava ECE Report

Uploaded by

Copyright:

Available Formats

Aditya Srivastava ECE Report

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aditya Srivastava ECE Report

Uploaded by

Copyright:

Available Formats

Jaipur Engineering College and

Academic Year- 2021-2022

Industrial Training Report

Department of Electronics And Communication

Name of Guide Ashish Sharma

Designation Industrial Training Coordinator , ECE

To become a renowned Centre of excellence in Electronics And Communication engineering

MISSION OF ECE DEPARTMENT

PROGRAM OUTCOMES (POs)

3. Design/development of solutions: Design solutions for complex Computer Science and

4. Conduct investigations of complex problems: Use research-based knowledge and research

10. Communication: Communicate effectively on complex Computer Science and Engineering

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

The PEOs of the B.Tech (ECE) program are:

PROGRAM SPECIFIC OUTCOMES (PSOs)

COURSE OUTCOMES (COs)

MAPPING: CO’s & PO’s

What is Web Development?

Scope in Web Development?

free to choose whatever suits you best!

work-life balance, and flexibility, to name a few.

● HTML stands for Hyper Text Markup Language

A Simple HTML Document

<h1>My First Heading</h1>

<p>My first paragraph.</p>

● The <h1> element defines a large heading

What is an HTML Element?

<tagname>Content goes here...</tagname>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

● All HTML elements can have attributes

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

HTML Comment Tag

The <form> Element

The <input> Element

The HTML <input> element is the most used form element.

A form with input fields for text:

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname">

The Submit Button

The form-handler is specified in the form's action attribute.

A form with submit button

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

<input type="submit" value="Submit">

1. The .container class provides a responsive fixed width container

Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-

The classes for text colors are:

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary,

Bootstrap 4 Basic Table

A basic Bootstrap 4 table has a light padding and horizontal

dividers. The .table class adds basic styling to a table