IFETCE R-2019A ACADEMIC YEAR: 2023-2024
IFET COLLEGE OF ENGINEERING
(An Autonomous Institution)
DEPARTMENT OF CSE & IT
CSH007 – UI and UX DESIGNS
YEAR/SEM: III/V
QUESTION BANK
UNIT III– UI DEVELOPMENT KIT
Introduction to Bootstrap, Overview of features and components - Bootstrap Grid System -
Bootstrap CSS Components: typography, colors, and spacing classes, forms and input
components with Bootstrap - Navigation menus and bars - Bootstrap javascript Components -
Bootstrap's modal, carousel, tooltip components, image gallery – Bootstrap Customization -
Bootstrap's Sass files, optimization - Extending Bootstrap with third-party plugins - Setting up a
development environment with Bootstrap.
PART - A
Introduction to Bootstrap, Overview of features and components- Bootstrap Grid System
1 Define Bootstrap. R
2 How can you use Bootstrap to make thumbnails? A
3 Generalize on any two characteristics of bootstrap as a product. S
4 What are the advantages and disadvantages of using Bootstrap? R
5 List out the key components of bootstrap? S
6 What are the elements of bootstrap grid system? R
7 Define Grid classes. R
8 Describe the basic structure of a bootstrap grid? U
Bootstrap CSS Components: typography, colors and spacing classes, forms and input
components with Bootstrap
9 To illustrate the h1-h6 classes? A
10 Define typography, colors. R
11 Analyse why Bootstrap is preferred for website development. A
12 Which are the classes used for pagination in Bootstrap? R
13 Why do we use Jumbotron in Bootstrap? A
Navigation menus and bars- Bootstrap javascript Components
14 Name some coloured navigation bar. U
15 How will you create a Bootstrap panel with headings? A
16 Explain why to choose Bootstrap for building the websites? R
17 How can you create a tabbed navigation menu? A
18 What are class loaders available in Bootstrap? R
19 Differentiate between bootstrap and foundation frameworks. U
20 Define Bootstrap Container. R
21 In Bootstrap what are the two ways you can display the code? A
Bootstrap's modal, carousel, tooltip components, image gallery
22 What is a Bootstrap Container, and how does it work? U
23 How do you implement tooltips and popovers in Bootstrap? A
24 How can you customize Bootstrap to fit your project’s needs? S
25 How can you integrate Bootstrap with other JavaScript frameworks like Angular A
or React?
1
IFETCE R-2019A ACADEMIC YEAR: 2023-2024
Bootstrap Customization - Bootstrap's Sass files, optimization - Extending Bootstrap
with third-party plugins - Setting up a development environment with Bootstrap.
26 Define Bootstrap optimization. R
27 What are the possible ways to customize bootstrap in user interface? U
28 How do you Create a Vertical or Basic Form in Bootstrap? A
29 Why would you extend Bootstrap with third-party plugins? A
30 Why is it important to set up a development environment with Bootstrap? A
PART-B
1 Describe the overview of features and components of bootstrap. 16 U
2 Create a web page using Bootstrap's CSS components for a travel booking 16 A
website. The page should include a hero section with a background image and
text overlay, a card section displaying popular travel destinations, and a contact
form at the bottom.
3 Explain in detail about bootstrap grid system? 16 U
4 Develop a responsive web page layout using Bootstrap's grid system for a 16 A
fictional e-commerce website. The layout should include a header, sidebar,
main content area, and footer. Additionally, demonstrate the responsiveness of
the layout by adjusting the column sizes for different screen sizes.
5 How would you implement a carousel with multiple slides in bootstrap? 16 A
6 Briefly explain the bootstrap javascript components? 16 R
7a. Explain the uses of Bootstrap's Modal, Carousel component? 8 R
7b. Discuss in detail about bootstrap customization? 8 R
8 Develop a navigation menu and a fixed top navigation bar using Bootstrap for a 16 A
restaurant website. The navigation menu should include links to different
sections of the website, and the top navigation bar should display the
restaurant's logo and contact information.
