Lecture Bootstrap 17-18-19

Bootstrap basics
Introduction
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
The most popular front-end framework for developing responsive,
mobile first projects on the web.
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 desktop
Outline Bootstrap
• Environment setup
• Bootstrap layout
• Tables
• Forms
• lists
 Grid System
• Responsive Column Reset
• Column ordering
• Responsive images
Bootstrap Versions
• Bootstrap 5 (released 2021) is the newest version of Bootstrap (with

new components, faster stylesheet and more responsiveness.
• Bootstrap 5 supports the latest, stable releases of all major browsers

and platforms. However, Internet Explorer 11 and down is not
supported.
• The main differences between Bootstrap 5 and Bootstrap 3 & 4, is

that Bootstrap 5 has switched to vanilla JavaScript instead of jQuery.
Why Use Bootstrap?
Advantages of Bootstrap:
• 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 5 is compatible with all modern
browsers (Chrome, Firefox, Edge, Safari, and Opera..
Where to Get Bootstrap 5?
• There are two ways to start using Bootstrap 5 on your own web site.
• You can:
• Include Bootstrap 5 from a CDN

• Download Bootstrap 5 from getbootstrap.comBootstrap 5 CDN
• If you don't want to download and host Bootstrap 5 yourself, you
can include it from a CDN (Content Delivery Network).
Getbootstrap.com and down load css and js
source file
Download
Alternate way Best way shortest way
CDN links
• <linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonyus">
• <scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/botstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Create Your First Web Page With Bootstrap 5
• 1. Add the HTML5 doctype
• Bootstrap 5 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 title and character set:
Always include the HTML5 doctype at the beginning of the page,
along with the lang attribute and the correct title and character
set: Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
• charset=”utf-8″> is an HTML tag that is used to indicate the web
page's character encoding
• This is useful In order to see the correct content
2. Add <meta> tag Inside Head Element
• 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.
• A viewport is the user's visible area of a webpage.
• A viewport meta tag is HTML (HyperText Markup Language) code that
tells browsers how to control viewport dimensions and scaling. It’s a
key ingredient of responsive web design and ensures your content is
easy to view
Example
<!DOCTYPE html> // Adding HTML 5 doc
<html lang="en"> // declaring html language
<head>
<meta charset="utf-8"> // Adding charset
<meta name="viewport" content="width=device-width, initial-
scale=1"> // Adding meta tag
</head>
Now Include Bootstrap CDN link
<!DOCTYPE html>
<html lang="en"> // declaring html language
<head>
<meta charset="utf-8"> // Adding charset
<meta name="viewport" content="width=device-width, initial-scale=1">
// Adding meta tag
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
// Adding Bootstrap link
</head>
Step 5 : Add Containers
Containers are used to contain, pad, and (sometimes) center the

content within them
• 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
Example Full Width Container
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Cont…
<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>
output
Fixed Container
Use the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes:
Fixed Container example
<!DOCTYPE html>
<html lang="en">
<head>
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.cs
s" rel="stylesheet">
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle
.min.js"></script>
</head>
<body>
Cont…
<div class="container">
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width
container.</p>
<p>Resize the browser window to see that the container width will
change at different breakpoints.</p>
</div>
</body>
</html>
Output fixed Container
Container Border and color
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
Container border and color
<div class="container p-5 my-5 border">
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">

<p>This container has a dark background color and a white text, and some
extra padding and margins.</p>
</div>
Cont…
<div class="container p-5 my-5 bg-primary text-white">
<p>This container has a blue background color and a white text, and
some extra padding and margins.</p>
</div>
</body>
</html>
Output
Bootstrap Typography
• Bootstrap Typography provides a standardized and flexible approach
to text styling, offering various classes for headings, paragraphs, and
inline text elements
Bootstrap 5 Text/Typography
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
Cont.…
<div class="container mt-3">
<p>The font-size of each Bootstrap heading depends on the screen size. Try to resize
the browser window to see the effect.</p>
<h1>h1 Bootstrap heading</h1>
</div>
</body>
</html>
Output typograpgy
Text Colors
• Bootstrap 5 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:
colors
Contextual colors
<!DOCTYPE html>
<html lang="en">
<head>
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min
.css" rel="stylesheet">
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bun
dle.min.js"></script>
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through
colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
output
Background Colors
• The classes for background colors are: .bg-

primary, .bg-success, .bg-info, .bg-warning, .bg-
danger, .bg-secondary, .bg-dark and .bg-light
BG COLOR
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
</head>
<body>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>
</body>
</html>
output
Basic Table
• A basic Bootstrap5 table has a light padding and horizontal dividers.
• The .table class adds basic styling to a table:

Basic Table
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
</head>
<body>
Cont…
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
Cont…
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Basic table output
Striped rows
The .table-striped class adds zebra-stripes to a table:
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
</head>
<body>
Cont..
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
Cont…
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
Strips rows output
• The .table-bordered class adds borders on all sides of the table and
cells:Borderless Table
• The .table-borderless class removes borders from the table:

Table border Class
<!DOCTYPE html>
<html lang="en">
<head>
<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>
Table border class
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
Cont..
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output table border class
Black/Dark Table
The .table-dark class adds a black background to the table:
Dark Stripped table
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
></script>
</head>
Cont. Dark Striped table
<body>

<h2>Dark Striped Table</h2>
<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
Cont.Dark stripped
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
Cont..Dark stripped table
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
output
Responsive Tables
• The .table-responsive class creates a responsive table.

• The table will then scroll horizontally on small devices (under 768px).
When viewing on anything larger than 768px wide,
there is no difference.
Responsive table output

Lecture Bootstrap 17-18-19

Uploaded by

Copyright:

Available Formats

Lecture Bootstrap 17-18-19

Uploaded by

Document Information

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

Lecture Bootstrap 17-18-19

Uploaded by

Copyright:

Available Formats

Bootstrap basics

Bootstrap is a free front-end framework for faster and easier web

• Responsive web design is about creating web sites which

• Bootstrap 5 (released 2021) is the newest version of Bootstrap (with

• Bootstrap 5 supports the latest, stable releases of all major browsers

• The main differences between Bootstrap 5 and Bootstrap 3 & 4, is

• Include Bootstrap 5 from a CDN

• 1. Add the HTML5 doctype

• Always include the HTML5 doctype at the beginning of the page,

• <meta name="viewport" content="width=device-width, initial-scale=1">

Containers are used to contain, pad, and (sometimes) center the

• There are two container classes to choose from:

• The .container class provides a responsive fixed width container

<div class="container p-5 my-5 bg-dark text-white">

• Bootstrap 5 has some contextual classes that can be used to provide

• The classes for text colors are: .text-muted, .text-primary, .text-

• The classes for background colors are: .bg-

• A basic Bootstrap5 table has a light padding and horizontal dividers.

• The .table class adds basic styling to a table:

• The .table-borderless class removes borders from the table:

<div class="container mt-3">

• The .table-responsive class creates a responsive table.

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.