Scribd
Upload
21 views

Lecture 12

Bootstrap is a popular CSS framework for developing responsive and mobile-first websites. It includes pre-built UI components for common tasks like navigation, typography, forms, buttons, tables, images and more. The Bootstrap grid system uses a series of containers, rows and columns to layout and align content. It is responsive, with columns that automatically re-arrange depending on screen size. Bootstrap makes front-end web development easier and websites more responsive.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

Lecture 12

Bootstrap is a popular CSS framework for developing responsive and mobile-first websites. It includes pre-built UI components for common tasks like navigation, typography, forms, buttons, tables, images and more. The Bootstrap grid system uses a series of containers, rows and columns to layout and align content. It is responsive, with columns that automatically re-arrange depending on screen size. Bootstrap makes front-end web development easier and websites more responsive.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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)
<!-- Latest compiled 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.6.4/jquery.min.js"> </script>
<!-- Latest compiled JavaScript -->
<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 [email protected]
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
• Bootstrap Containers
– Fixed Container
• Use .container class to create responsive, fixed width container.
• Its width (max-width) will change on different screen sizes:
Bootstrap
• Bootstrap Containers
– 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
– screen width equal or greater than 768px.
• .col-lg large devices
– screen width equal or greater than 992px.
• .col-xl xlarge devices
– screen width equal or greater than 1200px.
• .col-xxl xxlarge devices
– screen width equal or greater than 1400px.
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 class="col">.col</div>
<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
• Basic Structure of Bootstrap Grid
– 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
• Basic Structure of Bootstrap Grid
– 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 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
• Basic Structure of Bootstrap Grid
– 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 class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
Responsive Web Design (Example)
Restaurant Portal (extra-small screen)
Responsive Web Design (Example)
Restaurant Portal (small screen)
Responsive Web Design (Example)
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

You might also like