What is Responsive Web Design?
• Responsive web design is about creating web sites which
automatically adjust themselves to look good on all devices, from
small phones to large desktops.
• Bootstrap is the most popular HTML, CSS, and JavaScript framework
for developing responsive, mobile-first web sites.
• Bootstrap is completely free to download and use!
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
Where to Get Bootstrap?
• There are two ways to start using Bootstrap on your own web site.
• Download Bootstrap from getbootstrap.com
• If you want to download and host Bootstrap yourself, go
to getbootstrap.com, and follow the instructions there.
• Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap yourself, you can
include it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript.
You must also include jQuery.
Bootstrap CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></scr
ipt>
Create First Web Page With Bootstrap
1. Add the HTML5 doctype
• Bootstrap uses HTML elements and CSS properties that require
the HTML5 doctype.
• Always include the HTML5 doctype at the beginning of the
page, along with the lang attribute and the correct character
set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 is mobile-first
• Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles
are part of the core framework.
• To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:
❑<meta name="viewport" content="width=device-width,
initial-scale=1">
• The width=device-width part sets the width of the page to follow the screen-
width of the device (which will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
Grid Classes
❑The Bootstrap grid system has four classes:
• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px
wide)
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:grey;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:pink;">.col-sm-4</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:pink;">.col-sm-8</div>
</div>
</div>
</body>
</html>
Bootstrap Tables
Buttons
• There are different types of buttons:
• Black-level Button:
<body>
<div class="container">
<h2>Button</h2>
<button type="button" class="btn btn-info btn-block">Block-level Button</button>
</div>
</body>
<body>
• Nav:
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Bootstrap Themes
• Bootstrap themes are fully designed products that use custom CSS to
create a uniquely styled end product.
• With themes, we’ve made most, if not all, of the design decisions
upfront, so the product is ready to modify with your own content and
publish.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.bg-1 {
background-color: #1abc9c;
color: #ffffff;
}
</style>
</head>
<body>
<div class="bg-1">
<div class="container text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird" width="350" height="350">
<h3>I'm an adventurer</h3>
</div>
</div>
</body>
</html>
Bootstrap CSS
• The most popular CSS framework for developing responsive and
mobile-first websites is Bootstrap.
• There are different types of CSS:
• Typography
• Button
• Form
• Images
• Tables
• Dropdown
• NAVs
Typography
• Bootstrap's global default font-size is 14px, with a line-height of 1.428.
• The classes below is used to style the elements further.
1) <h1> - <h6>: h1-h6 Heading
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>h1 Bootstrap heading <small>(36px)</small></h1>
<h2>h2 Bootstrap heading <small>(30px)</small></h2>
<h3>h3 Bootstrap heading <small>(24px)</small></h3>
<h4>h4 Bootstrap heading <small>(18px)</small></h4>
<h5>h5 Bootstrap heading <small>(14px)</small></h5>
<h6>h6 Bootstrap heading <small>(12px)</small></h6>
</div>
</body>
</html>
2) .lead: Makes a text stand out: Stand out text
<body>
<div class="container">
<h2>Typography</h2>
<p>Use the .lead class to make a paragraph "stand out":</p>
<p class="lead">This paragraph stands out.</p>
<p>This is a regular paragraph.</p>
</div>
</body>
2) <mark> or .mark : Highlights text: Highlighted text
• Form:
• Individual form controls automatically receive some global styling with
Bootstrap.
• All textual <input>, <textarea>, and <select> elements with class="form-
control" are set to width: 100%; by default. (Make responsive)
• Standard rules for all three form layouts:
• Wrap labels and form controls in <div class="form-group"> (needed for
optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, <select> elements.
