ZAWADI F. KYANDO.

T/UDOM/2021/05067 BED ICT

1.Bootstrap is a free and open source front end development framework for the creation of
websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to
facilitate the development of responsive, mobile-first sites and apps.

2.what are the different versions of bootstrap framework?.Bootstrap is the world's most famous
free CSS framework. You can choose between the following versions:

B3. Learn Bootstrap 3 Bootstrap 3 is the most stable version of Bootstrap, and it is still supported
by the team for critical bugfixes and documentation changes.

3.How can you intergrate bootstrap framework into your web application

Create an HTML Page

As a first step in this tutorial, we will create a simple HTML template as a base where we will
use Bootstrap. For that, the first thing you want to do is create a folder on your computer or
server for the project files. In this case, we will simply call it bootstrap. Here, create a new text
file and call it index.html. Open it with a text editor of your choice (e.g. Notepad++) and then
paste the code below into it.

Load Bootstrap via CDN

As already explained, Bootstrap consists mainly of style sheets and scripts. As such, they can be
loaded in the header and footer of your web page like other assets such as custom fonts. The
framework offers a CDN (content delivery network) access path for that. You can find it on the
Bootstrap download page when you scroll down.

Host Bootstrap Locally

An alternative way to set up Bootstrap is to download it to your hard drive and use the files
locally. You find download options in the same place as the links to the remote version. Be sure
to get the compiled CSS and JS files. You don’t need the source files.

Once you have finished downloading it, unzip the file and copy its contents into the same
directory as index.html. After that, you can load the Bootstrap CSS into your project like this:

Include jQuery

In order to get the full functionality of Bootstrap, you also need to load the jQuery library. Here,
too, you have the possibility to load it remotely or host it locally.

Include jQuery
In order to get the full functionality of Bootstrap, you also need to load the jQuery library. Here,
too, you have the possibility to load it remotely or host it locally.

Put it All Together

If you have followed the steps above correctly, you should end up with a file that looks like this
for the remote solution.

4.

Easy to Use

Bootstrap is very simple to use – the setup process doesn’t take too long and is relatively easy,
even for beginners. While it’s not mandatory, having basic knowledge of HTML, CSS and
JavaScript will undoubtedly help you modify the code with ease. Check out Bootstrap’s
documentation page to learn more.

Responsive Grid System

One of today’s most significant demands in terms of web development is making sure that
websites are responsive and mobile-friendly. Bootstrap has that covered with their dedicated
mobile-first grid system – it can divide the screen into twelve columns to accommodate various
screen sizes, thus making its web design adaptable to all kinds of devices.

Customizable

If you’re not happy with Bootstrap’s design template, you can add your own twist to its CSS file.
You can also combine it with the existing code and make them complement each other’s
functions. This ability is particularly useful if you want to create a unique look for your website
but don’t have the time or CSS knowledge to start everything from scratch.

Responsive Grid System

One of today’s most significant demands in terms of web development is making sure that
websites are responsive and mobile-friendly. Bootstrap has that covered with their dedicated
mobile-first grid system – it can divide the screen into twelve columns to accommodate various
screen sizes, thus making its web design adaptable to all kinds of devices.

Cross-browser Compatible
Bootstrap is compatible with the latest versions of all modern browsers and platforms. While
Bootstrap claims that it doesn’t support older or proxy browsers, that shouldn’t affect its display
and function.

Maintain Consistency

Both Mark Otto and Jacob Thornton developed Bootstrap specifically to solve the inconsistency
issue between front-end and back-end developers, and it truly delivers. Bootstrap eliminates the
use of libraries that always differ from one developer to the other. Thus, you get to maintain the
stability of your project elements no matter who is tackling them.

5.What is Contextual classes of table in Bootstrap ?

Bootstrap provides a series of classes that can be used to apply various styling to the tables such
as changing the heading appearance, making the rows stripped, adding or removing borders,
making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.

Simple Table: The .table class is used to create a simple Bootstrap table. This class name is used
with the <table> tag to create a table.

Syntax:

<table class=”table”>

Table Contents…

<table>

<!DOCTYPE html>

<html lang=”en”>

<head>
 <title>Bootstrap Tables</title>

<meta charset=”utf-8”>

<meta name=”viewport”

Content=”width=device-width, initial-scale=1”>

<link rel=”stylesheet” href=

<script src=

>

</script>

<script src=

</script>

<script src=
>

</script>

</head>

<body>

<div class=”container”>

<h1 style=”text-align:center;color:green;”>

GeeksforGeeks

</h1>

<!—Bootstrap table class 

<table class=”table”>

<thead>

<tr>

<th scope=”col”>S. No.</td>

 <th scope=”col”>Name</td>

<th scope=”col”>City</td>

<th scope=”col”>Age</td>

</tr>

</thead>

<tbody>

<tr>

<th scope=”row”>1</td>

<td>Akshit</td>

<td>Moradabad</td>

<td>20</td>

</tr>
 <tr>

<th scope=”row”>2</td>

<td>Nikita</td>

<td>Lucknow</td>

<td>21</td>

</tr>

<tr>

<th scope=”row”>3</td>

<td>Parul</td>

<td>Dehradun</td>

<td>22</td>

</tr>

</tbody>
 </table>

</div>

</body>

</html>

Ya7. There are two major layouts for Bootstrap i.e. Fluid Layout and Fixed Layout.

Fluid layout is necessary for creating an app that is 100 % wider and covers all the screen width.

Fixed Layout is used only for a standard screen (940px).

Both layouts can be used for creating a responsive design.

8.Bootstrap Grid System

Bootstrap’s grid system allows up to 12 columns across the page. If you do not want to use all 12
column individually, you can group the columns together to create wider columns:

Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen
size: On a big screen it might look better with the content organized in three columns, but on a
small screen it would be better if the content items were stacked on top of each other.

9.Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class=”container”>

<div class=”row”>

<div class=”col-*-*”></div>
 <div class=”col-*-*”></div>

</div>

<div class=”row”>

<div class=”col-*-*”></div>

<div class=”col-*-*”></div>

<div class=”col-*-*”></div>

</div>

<div class=”row”>

</div>

</div>

So, to create the layout you want, create a container (<div class=”container”>). Next, create a
row (<div class=”row”>). Then, add the desired number of columns (tags with appropriate .col-
*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

10. Bootstrap Jumbotron

A Bootstrap jumbotron specifies a big box for getting extra attention to some special content or
information. It is displayed as a grey box with rounded corners. It can also enlarge the font sizes
of the text inside it. You can put any valid HTML or other Bootstrap elements/ classes inside a
jumbotron.

The class .jumbotron within the <div> element is used to create a jumbotron.

11.

Typography is a feature of Bootstrap for styling and formatting the text content. It is used to
create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-
oriented font styles, and much more. Bootstrap support global settings for the font stack,
Headings and Link styles to be used in the web app for every type of OS and Device to deliver
the best user interface.

Typography can be used to create:

Headings
Subheadings

Text and Paragraph font color, font type and alignment

Lists

Other inline elements

12. carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms
and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes
support for previous/next controls and indicators.

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the
webpage is not visible to the user (such as when the browser tab is inactive, the browser window
is minimized, etc.).

13.Pagination is the is a component used to indicate the existence of a series of related content
across multiple pages and enables navigation across them. We use a large block of connected
links for our pagination, making links hard to miss and easily scalable—all while providing large
hit areas.

14. Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user
notifications, or completely custom content.

Static backdrop

When the backdrop option is set to static, the modal will not close when clicked outside the
modal.

Long scrolling content

When there is a large amount of content within the modal body, and the modal becomes too long
for the user’s viewport or device, the modal will automatically trigger its scrollable feature
within the modal content area.

Vertically centered modal

This feature sets the modal box to the horizontal and vertical alignment center of the page.

Anitimation
This feature enables fading effects during the opening or closing modal.