IWDT TEST QUESTIONS

1. What is Twitter Bootstrap and why use Bootstrap?

Ans)Twitter Bootstrap is a free and open-source CSS framework for

developing responsive, mobile-first websites. It is one of the most popular
front-end frameworks in the world, and it is used by a wide variety of
websites, including major brands like Apple, Google, and Microsoft.

Why use Bootstrap:

● Responsive: Adapts to different screen sizes.

● Easy to use: Simple and intuitive syntax.
● Extensible: Wide range of plugins and themes.
● Community-driven: Large and active community of developers.
● Free and open-source: Can be used for any project.

2. What Bootstrap Package Includes?

Ans)The Bootstrap package includes a variety of components and files that

help you create responsive websites. These components include:

● Scaffolding: Grid system, link styles, background

● Components: Buttons, forms, navigation, alerts, pop-overs, carousel,
breadcrumb
● JavaScript Plugins: Modal, dropdown, collapse, tooltip, popover
● Customize: Bootstrap variables, LESS files, themes
● CSS: Bootstrap CSS, Bootstrap Sass, Bootstrap source maps
● JavaScript: Bootstrap JavaScript, Bootstrap jQuery plugins

3. What is a Grid?

Ans)A grid is a system of dividing a web page into rows and columns to
create a structured and organized layout. It provides a framework for
arranging content elements in a consistent and visually appealing manner.
Grids are commonly used in CSS frameworks to facilitate responsive
design, ensuring that web pages adapt seamlessly to different screen sizes
and devices.
4. What is Bootstrap Grid System?

Ans)The Bootstrap grid system is a responsive layout system that allows

you to create websites that adapt to different screen sizes. It uses a
12-column grid, and each column has a grid class that determines its width.
The grid system is easy to use and customize, and it is a powerful tool for
creating responsive websites.

5. What are the Grid options available and how to use them?

Ans)The Bootstrap grid system offers a variety of options for creating

flexible and responsive layouts. Here are some of the most commonly used
options:

Grid Classes: The core of the Bootstrap grid system lies in its predefined
grid classes. These classes, such as .col-sm-4 or .col-md-6, determine the
width of columns on different screen sizes. For instance, .col-sm-4 will
occupy 4 out of 12 columns on small devices (sm), while .col-md-6 will take
up 6 out of 12 columns on medium devices (md).

Responsive Breakpoints: Bootstrap utilizes five responsive breakpoints to

adapt the layout across various screen sizes: xs (extra small), sm (small),
md (medium), lg (large), and xl (extra large). These breakpoints determine
when specific grid classes become active. For example, .col-md-6 will start
taking up 6 columns only when the screen width reaches the medium
breakpoint.

Offset Classes: Offset classes, such as .offset-sm-2 or .offset-md-3, are

used to create spacing between columns. These classes add a margin to
the left side of a column, effectively pushing it away from its neighboring
columns.

Nesting: Bootstrap allows you to nest rows within rows, creating more
complex layouts. Nested rows inherit the grid system from their parent row,
enabling you to create multi-level grids.

Order Classes: Order classes, such as .order-sm-first or .order-md-last,

can be used to control the order in which columns appear within a row.
These classes override the default ordering of columns based on their grid
classes.
6. Explain the following classes; container, container-fluid, row, col.
Ans)
● container: Creates a responsive container with a fixed width.
● container-fluid: Expands the container to the full width of the browser
window.
● row: Groups columns into horizontal rows.
● col: Defines the width and responsiveness of content within a row.

7. Write the structure of container with 2 rows and 4 columns each of 3 col
gird system size.

Ans)<div class="container">
<div class="row">
<div class="col-md-3">Column 1</div>
<div class="col-md-3">Column 2</div>
<div class="col-md-3">Column 3</div>
<div class="col-md-3">Column 4</div>
</div>
<div class="row">
<div class="col-md-3">Column 5</div>
<div class="col-md-3">Column 6</div>
<div class="col-md-3">Column 7</div>
<div class="col-md-3">Column 8</div>
</div>
</div>

8. What is Bootstrap Typography?

Ans)Bootstrap typography is a collection of CSS classes to style text.

It includes classes for headings, paragraphs, lists, and other common text
elements.
It is designed to be responsive and looks good on all devices.
It is easy to use and extensible.
It is a great tool for creating consistent and visually appealing text.

9. How to set background color? List the default color supported by

bootstrap.
Ans)To set the background color of an element in Bootstrap, you can use
the bg-* classes. These classes come in a variety of colors, including
primary, secondary, success, danger, warning, info, light, and dark.

Here are some examples of how to use the bg-* classes:

<div class="bg-primary">
Primary background color
</div>
<div class="bg-secondary">
Secondary background color
</div>
<div class="bg-success">
Success background color
</div>
<div class="bg-danger">
Danger background color
</div>
<div class="bg-warning">
Warning background color
</div>
<div class="bg-info">
Info background color
</div>
<div class="bg-light">
Light background color
</div>
<div class="bg-dark">
Dark background color
</div>

10. Write the structure of Bootstrap basic table.

Ans)<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
 </thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>

11. Write the basic structure of a Bootstrap form.

Ans)<form class="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password"
placeholder="Enter password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

12. How to modify padding, margin and gutter in Bootstrap?

Ans)Bootstrap offers a variety of ways to modify padding, margin, and

gutter spacing to customize your web page layout. Here's a summary of the
key approaches:

Padding and Margin Utility Classes: Bootstrap provides utility classes for
adjusting padding and margin on various components. These classes use
different prefixes, such as p-, m-, and mx-, followed by a number indicating
the desired spacing in rem or percentage units.

CSS Properties: You can directly apply CSS properties like padding and
margin to individual elements or within custom CSS classes. This method
offers more granular control over spacing values.

Grid System Classes: For adjusting gutter spacing within the Bootstrap grid
system, use the g-* classes, where * represents the desired gutter width.
For example, g-0 removes all gutters, while g-3 sets a gutter width of 3
rem.

Custom CSS Classes: Create custom CSS classes to encapsulate your

desired spacing rules. This approach allows you to reuse spacing styles
consistently across your project.

Responsive Spacing: Utilize responsive breakpoints to adjust padding,

margin, and gutter spacing based on different screen sizes. This ensures
your layout adapts seamlessly to various devices.

Here's an example of using padding utility classes:

<div class="p-4">
<p>This paragraph has a padding of 4 rem.</p>
</div>
And here's an example of using CSS properties:
<div style="padding: 20px; margin: 10px;">
<p>This paragraph has a padding of 20px and a margin of 10px.</p>
</div>

13. How to style button (Change colour, size) in Bootstrap?

Ans)Button Color Classes: Bootstrap provides a set of color classes to

change the button's background color. These classes include .btn-primary,
.btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light,
and .btn-dark.

Button Size Classes: You can adjust the button's size using the .btn-lg,
.btn-sm, and .btn-xs classes. These classes enlarge, shrink, and
extra-shrink the button, respectively.
14. Explain vertical and horizontal alignment of elements.

Ans)Vertical alignment: Positioning of elements along the y-axis.

Horizontal alignment: Positioning of elements along the x-axis.
Common vertical alignment methods: Top, middle, bottom, baseline.
Common horizontal alignment methods: Left, center, right, justified.
Effective use of alignment enhances visual appeal, readability, and
usability.

15. How to style images with ends rounded, image in a circle and create a
thumbnail.

Ans)To style an image with rounded ends, you can use the border-radius
CSS property. For example, to set the border radius of an image to 10px,
you would use the following CSS code:

CSS
.rounded-image {
border-radius: 10px;
}

To style an image in a circle, you can use the border-radius CSS property
and set it to 50%. This will make the image a perfect circle. Here is an
example of how to do this:

CSS
.circle-image {
border-radius: 50%;
}

To create a thumbnail, you can use the img-thumbnail class. This class will
add a border, rounded corners, and a little bit of padding to the image. Here
is an example of how to use this class:

<img src="image.jpg" class="img-thumbnail">