TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau

TI33031
Pemrograman Web I
M Rizki Fadhilah S.T., M.Eng.
Prodi Teknik Informatika
Fakultas Teknik
Universitas Islam Riau
Week 7 - Bootstrap
What is Bootstrap
● Bootstrap is a free front-end framework for faster and easier
web development
● Bootstrap also gives you the ability to easily create
responsive designs
Why Use 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 4 is compatible with all
modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge,
Safari, and Opera)
How To Use Bootstrap
Choose Version
Version 4 : Stable Version 5: Development …
https://getbootstrap.com/ https://v5.getbootstrap.com/
Where to Get Bootstrap 4?
There are two ways to start using Bootstrap 4 on your own web
site.
You can:
1. Include Bootstrap 4 from a CDN

2. Download Bootstrap 4 from getbootstrap.com
Bootstrap 4 CDN
If you don't want to download and host Bootstrap 4 yourself, you
can include it from a CDN (Content Delivery Network).


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<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>
Create First Web Page With
Bootstrap 4
1. Add the HTML5 doctype
Bootstrap 4 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 4 is mobile-first
Bootstrap 4 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 4 also requires a containing element to wrap site contents.
There are two container classes to choose from:
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
3. Containers

Container Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Container Fluid Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class="container-fluid">
</div>
</body>
</html>
BS4 Containers
Containers

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:
Extra small Small Medium Large Extra large
<576px ≥576px ≥768px ≥992px ≥1200px
max-width 100% 540px 720px 960px 1140px

Fluid Container
Use the .container-fluid class to create a full width container, that will
always span the entire width of the screen (width is always 100%):
<div class="container-fluid">
</div>
Container Padding
By default, containers have 15px left and right padding, with no top or
bottom padding. Therefore, we often use spacing utilities, such as extra
padding and margins to make them look even better. For example, .pt-3 means
"add a top padding of 16px":
<div class="container pt-3"></div>

Container Border and Color
Other utilities, such as borders and colors, are also often used together
with containers:
<div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div>

BS4 Grid Basic
Bootstrap 4 Grid System
Bootstrap's grid system is built with flexbox and 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:
The grid system is responsive, and the columns will re-arrange

automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you
use all 12 available columns).
Grid Classes
The Bootstrap 4 grid system has five classes:
● .col- (extra small devices - screen width less than 576px)

● .col-sm- (small devices - screen width equal to or greater than 576px)
● .col-md- (medium devices - screen width equal to or greater than 768px)
● .col-lg- (large devices - screen width equal to or greater than 992px)
● .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for sm and md,
you only need to specify sm.
Basic Structure of a Bootstrap 4 Grid

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>


<div class="row">
<div class="col"></div>
</div>
BS4 Typography
Bootstrap 4 Default Settings
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>
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)

h6 Bootstrap heading (1rem = 16px)
Display Headings
Display headings are used to stand
out more than normal headings
(larger font-size and lighter
font-weight), and there are four
classes to choose from:
● .display-1,
● .display-2,
● .display-3,
● .display-4
BS4 Colors
Text 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:
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.
Note that background colors do not set

the text color, so in some cases you'll
want to use them together with a
.text-* class.
BS4 Tables
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.
The .table-striped class adds zebra-stripes to a table.
The .table-bordered class adds borders on all sides of the table and
cells:
BS4 Images
Bootstrap 4 Image Shapes
The .rounded class adds rounded corners to an image:
The .rounded-circle class shapes the image to a circle:
The .img-thumbnail class shapes the image to a thumbnail (bordered):
Responsive Images
Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen. Create responsive images by adding
an .img-fluid class to the <img> tag. The image will then scale nicely
to the parent element.
The .img-fluid class applies max-width: 100%; and height: auto; to the
image:
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
BS4 Jumbotron
Bootstrap 4 Jumbotron
A jumbotron indicates a big grey box for calling extra attention to some
special content or information.
Use a <div> element with class .jumbotron to create a jumbotron:
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
Full-width Jumbotron
If you want a full-width jumbotron without rounded borders, add the
.jumbotron-fluid class and a .container or .container-fluid inside of it:
<div class="jumbotron jumbotron-fluid">

<div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
BS4 Buttons
Bootstrap 4 Buttons
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>
<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>
Bootstrap 4 Buttons
The button classes can be used on <a>, <button>, or <input> elements:
<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
BS4 Button Groups
Bootstrap 4 Buttons
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
<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>
BS4 Badges
Bootstrap 4 Badges
Badges are used to add additional information to any content. Use the .badge
class together with a contextual class (like .badge-secondary) within <span>
elements to create rectangular badges. Note that badges scale to match the
size of the parent element (if any):
<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
BS4 Cards
Bootstrap 4 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.
BS4 Navbar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the
page:
With Bootstrap, a navigation bar can extend or collapse, depending on the

screen size.
A standard navigation bar is created with the .navbar class.
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
BS4 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%.
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:
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

Form Inputs
Bootstrap supports the following
form controls:
● input <div class="form-group">

● textarea <label for="usr">Name:</label>
● checkbox <input type="text" class="form-control" id="usr">
</div>
● radio
<div class="form-group">
● select <label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
BS4 Carousel
Bootstrap 4 Carousel
The Carousel is a slideshow for cycling through elements.
BS4 Modal
Bootstrap 4 Modal
The Modal component is a dialog box/popup window that is displayed on top of
the current page.
BS4 Tooltip
Bootstrap 4 Tooltip
The Tooltip component is small pop-up box that appears when the user moves
the mouse pointer over an element:
END

TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau

Uploaded by

Copyright:

Available Formats

TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau

Uploaded by

Document Information

Original Description:

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

TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau

Uploaded by

Copyright:

Available Formats

TI33031

1. Include Bootstrap 4 from a CDN

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

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

There are two container classes to choose from:

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

There are two container classes to choose from:

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

There are two container classes to choose from:

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

Extra small Small Medium Large Extra large

<576px ≥576px ≥768px ≥992px ≥1200px

max-width 100% 540px 720px 960px 1140px

<div class="container pt-3"></div>

<div class="container p-3 my-3 border"></div>

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

<div class="container p-3 my-3 bg-primary text-white"></div>

The grid system is responsive, and the columns will re-arrange

The Bootstrap 4 grid system has five classes:

● .col- (extra small devices - screen width less than 576px)

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

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

Bootstrap 4 has some contextual classes

The classes for text colors are:

The classes for background colors are:

Note that background colors do not set

The .table class adds basic styling to a table.

The .table-striped class adds zebra-stripes to a table.

Use a <div> element with class .jumbotron to create a jumbotron:

<div class="jumbotron jumbotron-fluid">

<button type="button" class="btn">Basic</button>

<a href="#" class="btn btn-info" role="button">Link Button</a>

Use a <div> element with class .btn-group to create a button group

<span class="badge badge-primary">Primary</span>

With Bootstrap, a navigation bar can extend or collapse, depending on the

A standard navigation bar is created with the .navbar class.

All textual <input>, <textarea>, and <select> elements with class

Add a wrapper element with

Additional rule for an inline form:

Add class .form-inline to the <form> element

● input <div class="form-group">

You might also like