THE UNIVERSITY OF DODOMA

COLLEGE OF INFORMATICS AND VIRTUAL EDUCATION

SEMESTER II COURSE ASSESSMENT

COURSE DETAILS
Course code: CP 221
Course Name: INTERNET PROGRAMMING

ASSESSMENT DETAILS
Type of Assessment: Normal Assignment
Number of Assessment: 2
Submission date: 28/05/2022

STUDENT DETAILS
Registration Number: T/UDOM/2020/00388
NAME: VICENT LAIZER
COURSE: BSc_SE

COURSE INSTRUCTOR
Name: Mr. Sifaeli
1. What is Bootstrap
Bootstrap is a free and open-source web development framework. It is designed to
ease the web development process of responsive, mobile-first websites by providing a
collection of syntax for template designs. It helps developers write less CSS code and
focus on the webpage design.
It was developed by Mark Otto and Jacob Thornton and a small group of core
developers who were twitter employees before it was open sourced.

2. The different versions of Bootstrap

Bootstrap 1
The first version of bootstrap was released on August 19, 2011. In its early days of
development it was called Twitter Blueprint. It aimed at reducing inconsistencies across
internal twitter developers.

Bootstrap 2
Released on January 31, 2012, Bootstrap 2 had a built-in support for Glyphicons
and other several components were improved. It supported responsive web design and
took into account the characteristics of the device in which a page was rendered.

Bootstrap 3
Released on August 19, 2013, Bootstrap 3 redesigned components to use flat
design and mobile first approach was introduced. It also introduce a plugin system with
namespaced events. This version dropped support for IE 7 and Firefox 3.6.

Bootstrap 4
Its stable version was released on January 18, 2018. It came with lots of changes,
some of them include:
● Replacing Less with Sass
● Dropping support for IE8, IE9 and IOS 6
● CSS flexible box support
● Addition of responsive spacing and sizing utilities
● Increasing global font size from 14px to 16px
● Dropping the Glyphicons icon font

Bootstrap 5
Officially released on May 5, 2021. It included the following major changes:
● New offcanvas menu component
● Dependency on JQuery removal
● Dropping support for IE
● Addition of custom set of SVG icons
● Addition of CSS custom properties
● RTL support
 ● Updated forms
● Enhanced grid system

3. Integrating Bootstrap to a web application

● Using CDN links added to the head section of a web page

● Downloading bootstrap and adding a source reference to the offline location

4. Why bootstrap is preferred for web development

I. Time-saving
II. Easy to Use
III.Responsive Grid System
IV. Customizable
V. Cross-Browser Compatibility
VI. Guaranteed Consistency
VII. Open-source
VIII. Huge Community Support

5. The key components of Bootstrap

● Buttons
● Alerts
● Navbar
● Forms and Input groups
● Jumbotron
● Tabs

6. Contextual classes of table in Bootstrap

● table-primary
● table-secondary
● table-success
 ● table-danger
● table-warning
● table-info
● table-light
● table-dark
● table-active

7. Types of layouts in Bootstrap

There are 2 types of layouts in bootstrap
i. Fluid Layout
necessary for creating apps that are 100% wide, covering the whole screen width.
It is implemented using the “.container-fluid” class

ii. Fixed Layout

used only for a standard screen, that is 940px. It is implemented using the
“.container” class

8. Bootstrap Grid System

It is a series of containers, rows and columns to layout and align content. It is built
with flexbox and is fully responsive. It uses a 12 column system, 5 default responsive
tiers and dozens of other predefined classes.

9. Example using the grid system

10. Why use Jumbotron

We use Jumbotron to call extra attention from the page user to some special
content or information on the page.
Example Jumbotron in Bootstrap
Output

Source code

11. Typography and links in Bootstrap

Typography is a feature of Bootstrap for styling and formatting text content. It is
used to create customized headings, inline subheadings, lists, paragraphs, aligning,
adding more design-oriented font styles and so much more.
Some of the elements that enable us to achieve desired typography include:
• mark tag
• heading tags
• text-muted class
• lead class
• abbr tag
• blockquote class
• text alignment classes
• listing classes
 • text-truncate class

Bootstrap links. Bootstrap provides classes that enable us to colorize links

depending on our needs. They also provide a hover and focus state effects. These classes
included:
• link-primary
• link-secondary
• link-success
• link-danger
• link-warning
• link-info
• link-light
• link-dark

12. The use of carousel plugin in bootstrap

Carousel is a slideshow for cycling through a series of content. Its built with CSS
3D transforms and JavaScript. The content may be text, images of slides of text. It has
support for previous/next controls and position indicators.

13. Bootstrap pagination

Pagination is used to indicate that a series of related content exists across multiple
pages.
use the “pagination” class to ass basic pagination in a web page.
Example of bootstrap pagination
Output
Source code

Classification of pagination in bootstrap

i. default pagination
similar to the one described above.
ii. icon pagination
uses icons instead of text in the “next” and “previous” buttons
iii. Pagination with pager class
implements the pager class that allows any html tags to be used instead of page
numbers
iv. Pagination with states
enables the use of active and disabled stated in the page numbers or any html
element that represents the page number in the pagination.

14. Bootstrap modal

Modal is a bootstrap plugin that toggles your hidden content on demand, via
attributes or JavaScript. It is placed over everything else on the page, it also overrides
the default scrolling behavior of the page.

Features of the Bootstrap Modal.

1. Modal header
2. Modal body
3. Modal footer
4. Modal trigger

Modal size can be adjusted using the modal-* class (* can be lg, sm or any other sizing
option supported in bootstrap)
Example; Bootstrap Modal
source code

Output: before trigger of modal

Output: after trigger