Lecture 12

Web Technologies
Bootstrap Framework
Today’s Lecture
• Bootstrap
– Bootstrap Introduction
– Advantages of Bootstrap
– Adding Bootstrap to HTML Page
– Bootstrap Containers
– Container Padding and Margin
– Container Color
– Responsive Container
• Grid System
– Grid System Introduction
– How Do Grid System Works
– Grid Classes
– Basic Structure of Bootstrap Grid
• Responsive Web Design (Example)
Bootstrap
• Bootstrap was developed by Mark Otto and Jacob Thornton at
Twitter and released as an open-source product in August 2011 on
GitHub.
• It’s most popular CSS Framework for developing responsive
websites.
• It includes HTML and CSS based design templates for typography,
buttons, tables, navigation, images and many more.
• Bootstrap 5 is the newest version of Bootstrap.
– It’s completely free to download and use.
– It contains new components, faster stylesheet and more
responsiveness.
– It supports to all major browsers and platforms.
Bootstrap
• Advantages of Bootstrap
– Easy to Use
• Anybody with just basic knowledge of HTML and CSS can use
Bootstrap.
– Responsive Features
• Bootstrap's responsive CSS adjusts to smart phone, tablet,
laptop, and desktop.
– Mobile-First Approach
• In Bootstrap 3, mobile-first styles are part of core
framework.
– Browser Compatibility
• It’s compatible with all modern browsers (like Google
Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera).
Bootstrap
Adding Bootstrap to HTML Page
• Include Bootstrap via CDN (Content Delivery Network)

<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.6.4/jquery.min.js"> </script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script>
• Install Bootstrap via Package Manager
– To download and host Bootstrap, visit https://getbootstrap.com/
download it and follow
instructions there.
$ npm install bootstrap@5.3.2
Bootstrap
<!DOCTYPE html> <div class="container bg-success">
<html> <div class="row">
<head> <div class="col-sm-4">
<title>Bootstrap</title> <h3>Topic 1</h3>
<meta charset="utf-8"> <p>Lorem ipsum dolor sit amet, consectetur…</p>
<meta name="viewport" content="width=device- <p>Ut enim ad minim veniam, quis nostrud…</p>
width, initial-scale=1"> </div>
<link rel="stylesheet" <div class="col-sm-4">
href="https://maxcdn.bootstrapcdn.com/bootstrap/ <h3>Topic 2</h3>
3.4.1/css/bootstrap.min.css"> <p>Lorem ipsum dolor sit amet, consectetur…</p>
<script <p>Ut enim ad minim veniam, quis nostrud…</p>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.
</div>
6.4/jquery.min.js"></script>
<div class="col-sm-4">
<script
<h3>Topic 3</h3>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.
4.1/js/bootstrap.min.js"></script> <p>Lorem ipsum dolor sit amet, consectetur…</p>
</head> <p>Ut enim ad minim veniam, quis nostrud…</p>
<body> </div>
<div class="container-fluid bg-primary text-center"> </div>
<h1>My First Bootstrap Page</h1> </div>
<p>Resize this responsive page to see the </body>
effect!</p> </html>
</div>
Bootstrap
Bootstrap
Bootstrap
• Bootstrap Containers
– Bootstrap requires a containing element to wrap site contents.
– Containers are used to pad the content inside of them.
– Container provides margins, padding, alignments, and much
more to HTML elements.
– There are two container classes:
• .container class provides a responsive fixed width container.
• .container-fluid class provides a full width container,
spanning the entire width of the viewport.
Bootstrap
– Fixed Container
• Use .container class to create responsive, fixed width container.
• Its width (max-width) will change on different screen sizes:
Bootstrap
– Fluid Container
• Use .container-fluid class to create a full width container, that will
span the entire width of the screen (width is always 100%).
Bootstrap
• Container Padding and Margin
– By default, containers have left and right padding, with no top or
bottom padding.
– Therefore, we use extra padding and margin to make them look
even better.
– Example:
<div class="container pt-4 mt-3 "></div>
<div class="container pt-4 my-3 "></div>
– Here pt-4 means padding top is 4.
– Here mt-3 means margin top is 3.
– Here my-3 means margin top and bottom is 3.
» y denotes y-axis (top and bottom).
» x denotes x-axis (right and left).
Bootstrap
• Container Color
– Bootstrap has some contextual classes that can be used to provide
"meaning through colors".
– Example: primary, success, info, warning, danger, secondary, dark,
and light.
Bootstrap
• Container Color
Bootstrap
• Responsive Containers
– Use .container-sm|md|lg|xl |xxl classes to determine when
container should be responsive.
– max-width of container will change on different screen
sizes/viewports:
Grid System
• Grid
– It’s a structure that used to design layout and content structure.
• Grid System
– It is responsive, and columns will re-arrange automatically
depending on the screen size.
• Bootstrap Grid System
– It uses a series of containers, rows, and columns to layout and
align content.
– It allows up to 12 columns across the page.
– We can use all 12 columns individually or group the columns
together to create the wider columns.
Grid System
How Do Grid System Works
Grid System
• Grid Classes
– Bootstrap grid system has six classes:
• .col extra small devices
– screen width less than 576px.
• .col-sm small devices
– screen width equal or greater than 576px.
• .col-md medium devices
• .col-lg large devices
• .col-xl xlarge devices
• .col-xxl xxlarge devices
Grid System
• Basic Structure of Bootstrap Grid
– Let Bootstrap Automatically Handle the Layout
• Example: create 3 equal-width columns:
<div class="row">
<div class="col">.col</div>
</div>
• To create 2 equal columns: “col” = 50% width to each col

• To create 3 equal columns: “col” = 33.33% width to each col
• To create 4 equal columns: “col” = 25% width to each col
Grid System
– Control Column Width, and How They Should Appear on Device
• Create a row <div class="row">
• Add desired device and number of columns (in .col-*-* class).
– 1st asterisk represents device (sm, md, lg, xl, or xxl)
– 2nd asterisk represents number of columns (which should
add up to 12 for each row)
<div class="row">
<div class="col-*-*"></div>
</div>
Grid System
– Responsive Columns
• Example shows how to create 4 equal-width columns:
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px
wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
Grid System
– Responsive Columns
• Example shows how to get 2 unequal-width columns:
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less
than 576px wide.</p>
<div class="row">
</div>
</div>
Responsive Web Design (Example)
Restaurant Portal (extra-small screen)
Restaurant Portal (small screen)
Restaurant Portal (small screen)
Summary of Today’s Lecture
• Bootstrap
– Bootstrap Introduction
– Advantages of Bootstrap
– Adding Bootstrap to HTML Page
– Bootstrap Containers
– Container Padding and Margin
– Container Color
– Responsive Container
• Grid System
– Grid System Introduction
– How Do Grid System Works
– Grid Classes
– Basic Structure of Bootstrap Grid
• Responsive Web Design (Example)
References
• https://getbootstrap.com/
• https://getbootstrap.com/docs/5.2/getting-started/download/
• https://getbootstrap.com/docs/5.0/getting-started/introduction/
• https://www.w3schools.com/bootstrap5/index.php
• https://www.w3schools.com/bootstrap5/bootstrap_containers.php
• https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
• https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php

Lecture 12

Uploaded by

Document Information

Original Description:

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 12

Uploaded by

Copyright:

Available Formats

Web Technologies

• To create 2 equal columns: “col” = 50% width to each col

You might also like