Gavin Engineering Services Pvt. Ltd.

₹5,000

Course Includes

Duration1 Month
Enrolled0
Lectures25
Videos0
Notes0
CertificateYes

What you'll learn

Learn Bootstrap from Basic to Advanced Level and create modern, responsive and professional websites faster.

This course introduces students to Bootstrap, a popular front-end framework for developing responsive and mobile-first websites. Students will learn the Bootstrap grid system, containers, rows, columns, typography, colors, spacing, buttons, forms, cards, navigation bars, tables and other ready-to-use components.

The course also covers advanced Bootstrap components such as modals, carousels, accordions, dropdowns, tabs, tooltips and offcanvas menus, along with responsive design and Bootstrap JavaScript components.

Through practical exercises and projects, students will learn how to build professional responsive websites for mobile, tablet and desktop devices.

🎯 What You Will Learn

Bootstrap fundamentals
Responsive Grid System
Containers, Rows & Columns
Typography and Colors
Spacing & Utility Classes
Buttons and Button Groups
Cards and Alerts
Navigation Bars & Dropdowns
Forms & Form Validation
Tables
Bootstrap Icons
Modals, Carousel & Accordion
Tabs, Tooltips & Popovers
Responsive Web Design
Bootstrap with JavaScript
Customizing Bootstrap with CSS
Complete responsive website development

👨‍🎓 Who Can Join?

Students
Beginners in Web Development
Web Designers
Computer/IT Students
Front-End Development Learners
Digital Marketing Students
Anyone interested in responsive website designing

📌 Prerequisite

Basic knowledge of HTML and CSS is recommended. Basic JavaScript knowledge will be helpful for Bootstrap's interactive components.

🏆 Course Outcome

After completing this course, students will be able to create responsive, modern and professional websites using Bootstrap, customize Bootstrap components with CSS and build complete website layouts suitable for real-world projects.

Course Syllabus

1. Introduction to Bootstrap

What is Bootstrap?
Why Use Bootstrap?
Bootstrap Features
Bootstrap Versions
Bootstrap 5 Introduction
Bootstrap CDN
Downloading & Installing Bootstrap
Creating Your First Bootstrap Page
Bootstrap File Structure

2. Bootstrap Grid System

Understanding the Grid System
Containers
Rows & Columns
.container
.container-fluid
Column Sizes
col
col-sm
col-md
col-lg
col-xl
col-xxl
Nested Columns
Responsive Grid Layout

3. Typography

Headings
Paragraphs
Text Alignment
Text Colors
Font Sizes
Font Weight
Text Transformation
Text Wrapping
Lists
Blockquotes

4. Bootstrap Colors & Backgrounds

Text Colors
Background Colors
Gradients
Opacity
Color Utilities
Contextual Colors

5. Bootstrap Spacing & Sizing

Margin
Padding
Gap
Width
Height
Responsive Spacing
Auto Margins
Spacing Utilities

6. Bootstrap Buttons

Basic Buttons
Button Colors
Button Sizes
Outline Buttons
Button Groups
Block Buttons
Disabled Buttons
Buttons with Icons

7. Bootstrap Images

Responsive Images
Image Shapes
Rounded Images
Thumbnails
Image Alignment
Image Figures

8. Bootstrap Components

Alerts
Badges
Breadcrumbs
Cards
List Groups
Progress Bars
Spinners
Pagination
Toasts

9. Navigation & Menus

Navbar
Navbar Branding
Navbar Links
Dropdown Menus
Responsive Navbar
Navbar Forms
Navbar Colors
Offcanvas Navigation

10. Bootstrap Forms

Form Controls
Labels
Text Inputs
Password Fields
Email Fields
Select Dropdown
Checkboxes
Radio Buttons
Range
File Input
Input Groups
Floating Labels
Form Validation

11. Bootstrap Layout & Positioning

Display Utilities
Flexbox Utilities
Position Utilities
Fixed Position
Sticky Position
Z-index
Overflow
Vertical Alignment
Horizontal Alignment

12. Bootstrap Advanced Components

Accordion
Carousel
Collapse
Modal
Dropdown
Tabs
Tooltips
Popovers
Offcanvas

13. Bootstrap Tables

Basic Tables
Striped Tables
Bordered Tables
Hover Tables
Responsive Tables
Table Colors
Table Alignment

14. Bootstrap Icons

Introduction to Bootstrap Icons
Adding Bootstrap Icons
Icons in Buttons
Icons in Navigation
Icons in Cards
Icons with Forms

15. Responsive Web Design

Mobile-First Design
Responsive Breakpoints
Responsive Containers
Responsive Columns
Responsive Images
Responsive Typography
Mobile, Tablet & Desktop Layouts

16. Bootstrap with JavaScript

Bootstrap JavaScript Bundle
Interactive Components
Modal using JavaScript
Carousel Controls
Dropdowns
Collapse
Tabs
Tooltips
Popovers

17. Customizing Bootstrap

Bootstrap Utilities
Custom CSS with Bootstrap
Overriding Bootstrap Styles
Creating Custom Buttons
Custom Colors
Custom Cards
Combining Bootstrap with CSS

18. Practical Projects

Course Fees

₹5000/-

Discounted Fees

₹ 5000/-

Course Duration

1 Month

Review

0.0

Course Rating (0 reviews)

Featured review

No reviews yet. Be the first to review this course!

Completion In BOOTSTRAP(S-CB-5903)