SE1 Section 4

SE 1 (Web Development Course)
Section 4 (Bootstrap)
Bootstrap Basics
Bootstrap?
● Bootstrap (or Twitter bootstrap)
○ is a framework (the popular front-end or UI framework)
■ A framework is often nothing more than a collection of existing technologies,
bundled together in a new, novel, and consistent way.
■ So…. to be more precise…. Bootstrap is a CSS framework.
○ is free to use and Open Source.
○ was developed by Twitter (and it is still maintained by Twitter.)
○ includes HTML and CSS based design templates for forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional
JavaScript plugins
Bootstrap 4 & 5
● Bootstrap 5 is the newest version of Bootstrap; with new components,
faster stylesheet and more responsiveness.
● Bootstrap 4 supports the stable releases of all major browsers and
platforms.
How to Use Twitter Bootstrap
● There are two ways to start using Bootstrap 4 on your own web site.
1. Include Bootstrap 4 from a CDN (online use)
■ From a CDN (Content Delivery Network)
2. Download Bootstrap 4 from getbootstrap.com (offline use)

Bootstrap 4 (from CDN)
● To include bootstrap 4 in your website:
○ Add these elements inside the <head> section
<head>

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


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!– responsive design -->

<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Bootstrap 4 (offline use)
● If you want to download and host Bootstrap 4 yourself
○ go to https://getbootstrap.com/ and download bootstap
○ Import bootstrap in your web page
D:\Faculty\Web Course ~ 2nd ~ 2020-2021\MyWebCV1\bootstrap practice\bootstrap-4.0.0-dist\css\bootstrap.min.css

First Bootstrap Example
Container (1-2)
● Bootstrap requires a containing element to wrap site contents.
● Containers are used to pad the content inside of them
● There are two container classes available:
○ 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
● Container Padding
○ By default, containers have 15px left and right padding, with no top or bottom
padding.
○ To add a top padding of 16px  <div class="container pt-3">

Container (2-2)
● Container border and background color
● You can also use the .container-sm|md|lg|xl classes to create responsive

containers where xs (extra small-phones), sm(small-tablets), md (medium-
desktops), lg (large-larger desktops), xl (extra large-more larger desktops)
Grid Layout (1-2)
● Bootstrap's grid system
○ is built with flexbox (div tag + display:flex)
○ 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
○ is responsive, and the columns will re-arrange automatically depending on the screen
size.
Grid Layout (2-2)
• The first star (*) represents the responsiveness: sm, md, lg or xl,
● How to write pages
• the using
second a grid: a number, which should add up to 12 for each row.
star represents
● Examples
Lets practice on
Bootstrap
Tables
Try other table’s classes (at w3schools) such as (1) table-dark,
A basic Bootstrap
(2)●contextual classes4for
table has a light
coloring padding and horizontal dividers.
it like
● The .table class adds basic styling to a table
● Examples
Bootstrap Buttons
The button classes can be used on <a>, <button>, or <input> elements:

Bootstrap Forms
● 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%.
Try
●
form validation
● Bootstrap provides two types of form layouts:
○ Stacked (full-width) form
○ Inline form
Bootstrap Images
● Bootstrap 4 provides the following classes for images:
○ Rounded Corners
■ The .rounded class adds rounded corners to an image
○ Circle
■ The .rounded-circle class shapes the image to a circle
○ Thumbnail
■ The .img-thumbnail class shapes the image to a thumbnail (bordered)
○ Responsive Images
■ 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 display: block; and max-width:
100%; and height: auto; to the image
× (×) is an HTML entity that is the preferred
icon for close buttons, rather than the letter "x".
Bootstrap Alerts
• For creating horizontal bar
• Remove it to create a vertical navigation bar
Bootstrap 4 Navigation Bar

● A navigation bar is a navigation header that is placed at the top of the page
to change the background color of the navbar
● Examples (.bg-primary, .bg-success, .bg-info, .bg-warning,
.bg-danger, .bg-secondary, .bg-dark and .bg-light
Practice more on Bootstrap 4
● Using the best tutorial on bootstrap
● https://www.w3schools.com/bootstrap/default.asp
Bootstrap Recourses
Bootstrap Themes and Templates
● You can find several templates and themes free to download
○ A theme consists of customized CSS
○ A template consists of one or more predesigned HTML pages, which often

make use of a theme
Bootswatch
● http://bootswatch.com/
Start bootstrap
● http://startbootstrap.com/
Thanks

SE1 Section 4

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

SE1 Section 4

Uploaded by

Copyright:

Available Formats

SE 1 (Web Development Course)

■ So…. to be more precise…. Bootstrap is a CSS framework.

○ is free to use and Open Source.

○ was developed by Twitter (and it is still maintained by Twitter.)

1. Include Bootstrap 4 from a CDN (online use)

■ From a CDN (Content Delivery Network)

2. Download Bootstrap 4 from getbootstrap.com (offline use)

○ Add these elements inside the <head> section

<!– responsive design -->

○ go to https://getbootstrap.com/ and download bootstap

○ Import bootstrap in your web page

D:\Faculty\Web Course ~ 2nd ~ 2020-2021\MyWebCV1\bootstrap practice\bootstrap-4.0.0-dist\css\bootstrap.min.css

○ The .container class provides a responsive fixed width container

○ To add a top padding of 16px  <div class="container pt-3">

● You can also use the .container-sm|md|lg|xl classes to create responsive

○ is built with flexbox (div tag + display:flex)

○ allows up to 12 columns across the page.

The button classes can be used on <a>, <button>, or <input> elements:

○ Stacked (full-width) form

Bootstrap 4 Navigation Bar

○ A theme consists of customized CSS

○ A template consists of one or more predesigned HTML pages, which often

You might also like