Scribd
Upload
71 views

Intoduction To Bootstrap

This document provides an introduction to using the Bootstrap framework to create responsive web pages. It describes the objectives, tools required and how to get Bootstrap. It demonstrates how to create a basic web page with Bootstrap and use its grid system, text colors, background colors and badges. The document is an instruction guide for learning the basics of Bootstrap 4.

Uploaded by

Sal N
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
71 views

Intoduction To Bootstrap

This document provides an introduction to using the Bootstrap framework to create responsive web pages. It describes the objectives, tools required and how to get Bootstrap. It demonstrates how to create a basic web page with Bootstrap and use its grid system, text colors, background colors and badges. The document is an instruction guide for learning the basics of Bootstrap 4.

Uploaded by

Sal N
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

CDEV

DBAV

Introduction to Bootstrap
Week 02.

SOFTWARE CLUSTER
[ CDEV • Coding and Development Project] [ DBAV • Database Applicati on Development ]
Objectives

• Describe the Bootstrap framework;


• Demonstrate how to use Bootstrap to create responsive web pages;

TEMASEK POLYTECHNIC I School of Informati cs & IT 2


Tools Required

• Visual Studio Code


• Node.js
• Browser
• Google Chrome (recommended)
• Mozilla Firefox

TEMASEK POLYTECHNIC I School of Informati cs & IT 3


BOOTSTRAP 4

4
What is Bootstrap?

• Free front-end framework for faster and easier web development

• Includes HTML and CSS based design templates

• Gives you the ability to create responsive designs that automatically


adjust themselves to look good on all devices

TEMASEK POLYTECHNIC I School of Informati cs & IT 5


Why Bootstrap?

• Easy to use: all you need is basic knowledge of HTML and CSS

• Responsive features: automatically adjusts to different screen size

• Mobile-first approach: design is focused on the online experience for


mobile

• Browser compatibility: compatible with all modern browsers

TEMASEK POLYTECHNIC I School of Informati cs & IT 6


How to get Bootstrap?

• Including the externally hosted CSS and JavaScript links in your HTML
files via CDN (Content Delivery Network)

• Alternatively, you can also download the files from


https://getbootstrap.com/ and host them yourself

TEMASEK POLYTECHNIC I School of Informati cs & IT 7


Create a web page with Bootstrap 4

• Create a new HTML file in your C:\Users\USERNAME\Documents\


website\public
• Name the HTML file as bootstrap_example.html
• Include the following HTML codes in the file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

TEMASEK POLYTECHNIC I School of Informati cs & IT 8


Create a web page with Bootstrap 4

• 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">

width=device-width sets the width


initial-scale=1 sets the initial zoom
of the page to follow the screen-
level when the page is first loaded
width of the device

TEMASEK POLYTECHNIC I School of Informati cs & IT 9


Create a web page with Bootstrap 4

• Include the Bootstrap CSS and Javascript files in the HTML by adding
the following codes inside the <head> element:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-


DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-


w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

TEMASEK POLYTECHNIC I School of Informati cs & IT 10


Container Classes

• Bootstrap requires a containing element to wrap site contents


• 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 (screen)

TEMASEK POLYTECHNIC I School of Informati cs & IT


Container Classes

• Add the following codes in the <body> element to see how a


responsive fixed width container looks like with the .container class
<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>

• Open the web page in your browser by navigating to


http://127.0.0.1:8080/bootstrap_example.html (remember to first
run your server with node server.js)

TEMASEK POLYTECHNIC I School of Informati cs & IT


Container Classes

• Now, add the following codes in the <body> element to see how a
full width container looks like with the .container-fluid class
<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.</p>
</div>

• Refresh the web page


http://127.0.0.1:8080/bootstrap_example.html

TEMASEK POLYTECHNIC I School of Informati cs & IT


Container Classes

• You should see the following:

.container provides a responsive


fixed width container

.container-fluid provides a
responsive full width container

TEMASEK POLYTECHNIC I School of Informati cs & IT


Grid Classes

• The grid system is made up of 12 columns across the page


• We can group the columns together to create wider columns

TEMASEK POLYTECHNIC I School of Informati cs & IT


Grid Classes

• Bootstrap has 5 grid classes


• .col (extra small devices – screen width < 576px)
• .col-sm (small devices – screen width >= 576px)
• .col-md (medium devices – screen width >= 768px)
• .col-lg (large devices – screen width >= 992px)
• .col-xl (xlarge devices – screen width > 1200px)

TEMASEK POLYTECHNIC I School of Informati cs & IT


Grid Classes

• Add the following codes to the bootstrap_example.html file inside the


<body> element to create 4 equal columns in the page
<div class="row">
<div class="col" style="background-color:lavender;">column 1</div>
<div class="col" style="background-color:lavenderblush;">column 2</div>
<div class="col" style="background-color:lavender;">column 3</div>
<div class="col" style="background-color:lavenderblush;">column 4</div>
</div>

• Refresh the web page again, you should see 4 columns created in the
page
• Resize your browser, you should see that the columns resize
accordingly too
TEMASEK POLYTECHNIC I School of Informati cs & IT
Grid Classes

• Next, add the following codes to the bootstrap_example.html file


inside the <body> element to create 4 equal columns in the page
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">sm column 1</div>
<div class="col-sm-3" style="background-color:lavenderblush;">sm column 2</div>
<div class="col-sm-3" style="background-color:lavender;">sm column 3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">sm column 4</div>
</div>

.col-sm-3 the columns will stack .col-sm-3 there are 12 columns in a row, by
on top of each other when the putting -3, it means the columns are grouped
screen width is lesser than 576px in 3s, we have 4 columns of 3s here, so 4 * 3
(sm-small devices) = 12 columns in total

TEMASEK POLYTECHNIC I School of Informati cs & IT


Grid Classes

• Refresh the page and resize your browser


• You should see that the columns will automatically stack on top of
each other when the screen size goes below 576px wide

TEMASEK POLYTECHNIC I School of Informati cs & IT


Text Colors

• Text colors
• some classes for text colors are: .text-muted , .text-primary , .text-
warning , .text-danger
• Add the following codes to bootstrap_example.html
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is primary.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>

TEMASEK POLYTECHNIC I School of Informati cs & IT


Text Colors

• Refresh the page to see the difference in text colors

TEMASEK POLYTECHNIC I School of Informati cs & IT


Background Colors

• Background colors
• some classes for background colors are: .bg-primary , .bg-secondary ,
.bg-warning , .text-danger
• Add the following codes to bootstrap_example.html
<p class="bg-primary text-white">This bg is primary.</p>
<p class="bg-secondary text-white">This bg is secondary.</p>
<p class="bg-warning text-white">This bg is warning.</p>
<p class="bg-danger text-white">This bg is danger.</p>

Using 2 classes at the same time,


one for the background color of
the text, the other for the text
color.

TEMASEK POLYTECHNIC I School of Informati cs & IT


Background Colors

• Refresh the page to see the difference in background colors

TEMASEK POLYTECHNIC I School of Informati cs & IT


Badge

• Badges are used to add additional information to any content


• Use the .badge class within <span> elements to create rectangular
badges
• Badges scale to match the size of the parent element (if any)

TEMASEK POLYTECHNIC I School of Informati cs & IT


Badge

• Add the following codes to bootstrap_example.html


<h1>Badge in H1 <span class="badge badge-primary">primary</span></h1>
<h2>Badge in H2 <span class="badge badge-secondary">secondary</span></h2>

.badge creates the badge .badge-secondary determines the color of the bage

TEMASEK POLYTECHNIC I School of Informati cs & IT


Badge

• Add the following codes to bootstrap_example.html


<p>Danger badge <span class="badge badge-pill badge-danger">Danger</span></p>
<p>Warning badge <span class="badge badge-pill badge-warning">Warning</span></p>
<p>Info badge <span class="badge badge-pill badge-info">Info</span></p>

.badge-pill makes the edges of the


badge rounder

TEMASEK POLYTECHNIC I School of Informati cs & IT


BOOTSTRAP 4: MODALS

27
Modal

• The Modal component is a dialog box/popup window that is


displayed on top of the current page

TEMASEK POLYTECHNIC I School of Informati cs & IT


Create a web page with Bootstrap 4

• Create a new HTML file in your C:\Users\USERNAME\Documents\


website\public
• Name the HTML file as bootstrap_modal.html
• Refer to slides 8, 9, 10 to include the following codes

TEMASEK POLYTECHNIC I School of Informati cs & IT 29


Modal

• Create a button within the <body> element


<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
</div> .btn-primary determines color data-toggle set to display a data-target set to launch
</body> of the button modal data in the <div> with the
id “myModal”

TEMASEK POLYTECHNIC I School of Informati cs & IT 30


Modal

• Continue to create the modal within the <div class=“container”>


element
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>

• The code above creates the modal dialog (the popup dialog box)

TEMASEK POLYTECHNIC I School of Informati cs & IT 31


Modal

• Create the modal header within the <div class=“modal-content”>


element
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

• The code above creates the modal header, click on the “Open
Modal” button to view the modal
&times; creates the “x” sign
in the button

TEMASEK POLYTECHNIC I School of Informati cs & IT 32


Modal

• Create the modal body within the <div class=“modal-content”>


element
<!-- Modal body -->
<div class="modal-body">
This is the modal body.
</div>

• This is where the actual contents of the modal should be

TEMASEK POLYTECHNIC I School of Informati cs & IT 33


Modal

• Lastly, create the modal footer within the <div class=“modal-


content”> element
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>

• The code above creates the modal footer with a red close button

data-dismiss is used to close


the modal

TEMASEK POLYTECHNIC I School of Informati cs & IT 34


BOOTSTRAP 4: NAVBAR

35
Navbar

• A navigation bar is a navigation header that is placed at the top of


the page

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

TEMASEK POLYTECHNIC I School of Informati cs & IT


Create a web page with Bootstrap 4

• Create a new HTML file in your C:\Users\USERNAME\Documents\


website\public
• Name the HTML file as bootstrap_navbar.html
• Refer to slides 8, 9, 10 to include the following codes

TEMASEK POLYTECHNIC I School of Informati cs & IT 37


Navbar

• Create a navbar within the <body> element


.navbar creates the .navbar-expand-sm stacks the links up if the .navbar-dark and .bg-dark made the
navigation bar screen width is less than 576px navigation bar appears in dark gray

<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>
</nav>
</body>
.navbar-brand highlights the
brand/logo/name of your page

TEMASEK POLYTECHNIC I School of Informati cs & IT 38


Navbar

• Create hyperlinks in the navbar by typing the following codes:


<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://www.tp.edu.sg">Temasek Polytechnic</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://lms.tp.edu.sg">LMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.google.com">Google</a>
</li>
</ul>

• 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
TEMASEK POLYTECHNIC I School of Informati cs & IT 39
Navbar

• Refresh the page to see the navbar

TEMASEK POLYTECHNIC I School of Informati cs & IT


Collapsible Navbar

• Next, we will make some changes to the codes to make a collapsible


Navbar when the screen size decreases to smaller than 576px

TEMASEK POLYTECHNIC I School of Informati cs & IT


Collapsible Navbar

• Create a button above the links


<!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

• This button will only appear when the width of the screen decreases
to lesser than 576px

TEMASEK POLYTECHNIC I School of Informati cs & IT 42


Collapsible Navbar

• Next, we need to create a <div> and place the links to be inside this
<div>
<!-- Links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
.
.
.
.
</ul>
</div>

TEMASEK POLYTECHNIC I School of Informati cs & IT 43


Collapsible Navbar

• Now, you can refresh the web page again, resize your browser to see
the collapsible navbar

TEMASEK POLYTECHNIC I School of Informati cs & IT


The End

You might also like