Scribd
Upload
30 views4 pages

Module-3 html-5

Bootstrap is a popular front-end framework that provides responsive design, saves time, and is customizable. It features a responsive grid system, well-maintained code, and compatibility with other libraries. Bootstrap containers create responsive layouts with centered content and consistent spacing. Semantic HTML5 elements like <header>, <nav>, and <main> provide meaningful structure. SVG uses XML to define scalable vector graphics while <canvas> is a container for graphics drawn via JavaScript.

Uploaded by

Pranay Bhatt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views4 pages

Module-3 html-5

Bootstrap is a popular front-end framework that provides responsive design, saves time, and is customizable. It features a responsive grid system, well-maintained code, and compatibility with other libraries. Bootstrap containers create responsive layouts with centered content and consistent spacing. Semantic HTML5 elements like <header>, <nav>, and <main> provide meaningful structure. SVG uses XML to define scalable vector graphics while <canvas> is a container for graphics drawn via JavaScript.

Uploaded by

Pranay Bhatt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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>

You might also like