Module-6 (Bootstrap)
Q1: What are the advantages of Bootstrap?
Ans: Bootstrap is a popular front-end framework for creating
responsive websites.
The Advantages of Bootstrap Is Given Below
1. Responsive Design
2. Time Saving
3. Customizable and Theming
4. Support Flex-box and grid
5. Well maintained and updated
6. Compatibility with other libraries
1. Responsive Design: One of the biggest advantage of bootstrap is its
provide built-in responsive grid system. It allows developers to create
websites that automatically adapt to different screen sizes and devices.
2. Time saving: Bootstrap comes with a pre-designed CSS styles,
component and JavaScript plugins that can be readily used to build
common UI elements like buttons, forms, modals, nav bar etc.
3. Customizable and Theming: Bootstrap is highly customizable.
Developers can easily customize the look and feel of the framework to
match their projects specific design requirements.
4. Support flex-box and Grid: The modern CSS features like flex-box and
grid. Bootstrap supports flex-box and grid for layout system. Making is
easier to create complex and flexible layout.
5. Well maintained and updated: Bootstrap is actively maintained by team
of developers ensuring that it stay up-to-date with the latest web
standards and best practices.
6. Compatibility with other libraries: Bootstrap can be easily integrated
with other JavaScript libraries and frame works, such as jQuery, making it
versatile and adaptable to different project requirements.
Q2: What is a Bootstrap Container, and how does it work?
Ans: In Bootstrap container is used to create a responsive grid system.
There are two types of containers in bootstrap
1. Container
2. Container-Fluid
1.Container: This is the standard container class that provides a responsive
fixed-width container. It adjusts its width based on screen size. It has a
predefined maximum width, and the content inside it will be centered
horizontally.
2.Container-Fluid: This class create a full-width container that spans the entire
width of the viewport.it does not have a fix width and expands to fill the
available space.
How the bootstrap container works
1.Responsive grid: When you placed element inside container, you can use
Bootstrap’s grid classes to create responsive colum and rows.
2.Centered content: The standard container class (.container) centers the
content inside it horizontally.
3.Padding and Margin: Bootstrap containers apply appropriate padding and
margin to the content inside them, helping to create consistent spacing between
elements.
Example to create bootstrap container in html.
<div class=”container”>
<div class=” row”>
<div class=”col-6”>
Q3: Semantic element in HTML5?
Ans: Semantic elements in html-5 are tags that provide meaning and structure
to the content of a web page.
Here some semantic elements given below:
1.<header>: Represent header content of a web page.
2.<nav>: Defines a section of navigation links.
3.<main>: Represent the main content of the document.
4.<section>: Define stand alone section with related content.
5.<time>: Specifies a specific time
6.<figure>: Represents self-contained content, such as an image, screen
shot etc.
7.<figure caption>: Provide a caption or description for given content in
<figure>.
Example:
Output:
Q4: Canvas and SVG tags
Ans: SVG: SVG stands for scalable vector graphics. SVG image are
resolution-independent and can be scaled without losing image quality.
The <svg> tag is an xml-based vector graphics format that allows for
creation scalable 2D vector graphics. It uses XML syntax to define
paths, and other graphical elements.
Example:
<svg width="500" height="300">
<rect x="0" y="0" width="200" height="200" fill="red"></rect>
</svg>
Canvas: The canvas tag is used to draw graphics, on the fly via java
script. The canvas tag is transparent, and is only for container
graphics, you must use a script to actually draw the graphics.
Example:
<canvas> This is a canvas tag </canvas>
