Advanced Web Technology

Commented [LD1]: Responsive Web Design and

Unit-I Introduction to Bootstrap
Responsive Web Design (RWD)
Responsive web design and introduction to Bootstrap : Bootstrap grid, bootstrap components and Responsive Web Design (RWD) is a web development
approach that ensures a website adapts to different screen
plugins sizes and devices (mobile, tablet, desktop). It uses flexible
layouts, media queries, and a fluid grid system to create a
Q1. Responsive Website Design? Introductions Bootstrap_Responsive user-friendly experience across various devices.
Introduction to Bootstrap
Q2 Introduction to BootStrap , Bootstrap , components and plugins , bootstrap_grid? Bootstrap is a free and open-source CSS framework used to
design responsive and mobile-first websites. It provides
predefined CSS classes, JavaScript components, and a grid
system to make web development faster and easier.

Bootstrap Grid System

The Bootstrap Grid System is a 12-column flexible layout
based on Flexbox. It helps design responsive web pages
efficiently.
Bootstrap Grid Classes:
•.container → Fixed-width container
•.container-fluid → Full-width container
•.row → Defines a row
•.col-{breakpoint}-{size} → Defines columns
•.col-sm-6 → 6 columns in small screens (≥576px)
•.col-md-4 → 4 columns in medium screens (≥768px)
Example of Bootstrap Grid System:
<div class="container">
<div class="row">
<div class="col-md-6 bg-primary text-white">Column
1</div>
<div class="col-md-6 bg-secondary text-white">Column
2</div>
</div>
</div>

Bootstrap Components
Bootstrap provides pre-built UI components that enhance
web design.
Common Bootstrap Components:
•Buttons → .btn, .btn-primary, .btn-danger
•Navbar → .navbar, .navbar-expand-lg
•Forms → .form-control, .form-group
•Cards → .card, .card-title, .card-body
•Alerts → .alert, .alert-warning, .alert-success
Example of Bootstrap Button and Card:
<button class="btn btn-success">Click Me</button>

<div class="card" style="width: 18rem;">

<img src="image.jpg" class="card-img-top" alt="Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some text inside the card.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>

Bootstrap Plugins
Bootstrap includes JavaScript-based plugins for interactivity.
Common Bootstrap Plugins:
•Modal → Creates popups
•Carousel → Image slider
•Tooltip → Hover effect ...