Unit-2 BootStrap4 Web Designing-1
2.1 Introduction of 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.
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
It is absolutely free to download and use.
History of Bootstrap:
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.
It was released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.
Why use Bootstrap
It is very easy to use. anybody having basic knowledge of HTML and CSS can
use Bootstrap.
It facilitates users to develop a responsive website.
What is a responsive website?
A website is called responsive website which can automatically adjust itself to
look good on all devices, from smart phones to desktops etc.
Bootstrap Example
Mobile-first styles are part of the core framework of Bootstrap. following <meta>
tag inside the <head> element for proper rendering and touch zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
Note: The "width=device-width" part is used to set the width of the page to follow
the screen-width of the device (vary according to the devices).
The initial-scale=1 part is used to set the initial zoom level when the page is first
loaded by the browser.
Containers: container is used to wrap the site contents. There are two container
classes.
The .container class provides a responsive fixed width container.
The .container-fluid class provides a full width container, spanning the
entire width of the viewport.
Page No. 1
, Unit-2 BootStrap4 Web Designing-1
Example:
<!DOCTYPE html>
<html>
<head>
<title>This is a Bootstrap example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Write your text here..</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</html>
2.2 Grid Structure:
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns.
Bootstrap's grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.
In web design, it is a very effective method to create a consistent layout rapidly and
effectively using HTML and CSS."
Bootstrap Grid System is responsive and the columns are re-arranged automatically
according to the screen size.
2.1 Introduction of 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.
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
It is absolutely free to download and use.
History of Bootstrap:
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.
It was released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.
Why use Bootstrap
It is very easy to use. anybody having basic knowledge of HTML and CSS can
use Bootstrap.
It facilitates users to develop a responsive website.
What is a responsive website?
A website is called responsive website which can automatically adjust itself to
look good on all devices, from smart phones to desktops etc.
Bootstrap Example
Mobile-first styles are part of the core framework of Bootstrap. following <meta>
tag inside the <head> element for proper rendering and touch zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
Note: The "width=device-width" part is used to set the width of the page to follow
the screen-width of the device (vary according to the devices).
The initial-scale=1 part is used to set the initial zoom level when the page is first
loaded by the browser.
Containers: container is used to wrap the site contents. There are two container
classes.
The .container class provides a responsive fixed width container.
The .container-fluid class provides a full width container, spanning the
entire width of the viewport.
Page No. 1
, Unit-2 BootStrap4 Web Designing-1
Example:
<!DOCTYPE html>
<html>
<head>
<title>This is a Bootstrap example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Write your text here..</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</html>
2.2 Grid Structure:
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns.
Bootstrap's grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.
In web design, it is a very effective method to create a consistent layout rapidly and
effectively using HTML and CSS."
Bootstrap Grid System is responsive and the columns are re-arranged automatically
according to the screen size.
