CCIT
Bootstrap
Learn Bootstrap 5 for efficient and responsive web development. It offers a robust framework with pre-designed components, responsive layout utilities, and customization options, streamlining the process of creating modern, visually appealing websites.
Duration | 1 months
Course Objective

The Bootstrap course aims to equip learners with skills to efficiently design responsive and visually appealing web applications. Covering grid systems, components, and customization, it focuses on creating modern, user-friendly interfaces using Bootstrap.

Key Features
Duration : 2 months
Theory Lectures : 68
Practical Lectures : 62
Theory Notes :
Certificate :
Project :
Thing You will Learn
1. Introduction
  • Bootstrap Get Started
  • What is Bootstrap ?
  • Bootstrap History
  • Why Use Bootstrap ?
  • Where To get Bootstrap ?
  • Downloading Bootstrap
  • Bootstrap CDN
2. IDEs
  • Visual Studio Code
  • Brackets
  • Sublime text
  • Atom
3. Typography
  • Headings
  • Display Headings
  • Inline Text Elements
  • Text wrapping
  • Text Colors
  • Text align
  • Text transform
  • Font Weight and Italics
  • Responsive Text Utilities
4. Border
  • Border Utility
  • Border Color
  • Rounded Borders
  • Responsive Borders
  • Border Width
  • Border Style
  • Border Radius Utility
  • Border Custom CSS
5. Box model
  • Width and Height
  • Padding
  • Margin
  • Responsive Margin and Padding
  • Box Sizing
  • Negative Margin
  • Shadow
6. Image
  • Responsive Images
  • Image Shapes
  • Image Thumbnails
  • Image Alignment
  • Break statement
  • Continue Statement
7. Alert
  • Alert Box
  • Alert Style
  • Alert Color
  • Dismissible Markup
  • Alert Heading
  • Alert Linking
8. Button
  • Basic Button
  • Button Styles
  • Outline Buttons
  • Button Sizes
  • Block Level Buttons
  • Disabled Button
  • Button with Icons
  • Button Groups
  • Toggle Buttons
  • Array Functions
9. Table
  • Basic Table Structure
  • Striped Rows
  • Bordered Table
  • Hover Effect
  • Responsive Tables
  • Table Head
  • Table Contextual
  • Table Borders
  • Table Styling
10. Badges
  • Basic badge
  • Badge Style
  • Pill Style badge
  • Badges in Buttons
  • Badge Sizes
  • Badge Links
  • Dynamic Badges
11. Card
  • Card Structure
  • Card Header
  • Card Body
  • Card Footer
  • Card Image
  • Card Title and Text
  • Card Actions
  • Card Colors and Styles
12. List group
  • Basic list group
  • List group item
  • Active and Disabled Items
  • Linked Items
  • Flush List Group
13. Collapse
  • Initialization Collapse
  • Collapse Structure
  • Collapse Button
  • Collapse with card
  • Method collapse
14. Dropdown
  • Create Dropdown
  • Dropdown Button
  • Add Dropdown Items
  • Dropdown Positioning
  • Dropdown Direction
15. Navs Tabs
  • Nav Component
  • Nav Types
  • Nav Items
  • Active Tab
  • Tabs item
  • Tabs pills
16. Navbar
  • Navbars Structure
  • Navbar Brand
  • Navbar Toggle Button
  • Navbar Navigation Links
  • Navbar Placement
  • Responsive Alignment
  • Dropdown Menus
  • Styling and Theming
  • Fixed Navbar
17. Form Input
  • Basic Input
  • Input Sizes
  • Input Types
  • Textarea
  • Select List
  • Input Groups
  • Checkboxes and Radios
  • Switches
  • Disabled Inputs
  • Validation States
18. Carousel
  • Carousel Structure
  • Carousel Items
  • Indicators
  • Controls
  • Carousel Autoplay
  • Pause on Hover
  • Responsive Images
19. Progressbar and Spinner
  • ProgressBar Structure
  • Progress Value
  • Contextual Colors
  • Striped Progress Bar
  • Animated Progress Bar
  • Labeling Progress Bar
  • Basic Spinner
  • Colored Spinners
  • Sizing Spinners
  • Growing Spinners
20. Tooltip and Popover
  • Initialize Tooltips
  • Tooltip Placement
  • Delay and Trigger
  • Initialize Popover
  • Popover Content and Title
21. Modals and Toast
  • Create a Modal Button
  • Create the Modal Structure
  • Customize modal options
  • Trigger Modal
  • Modal Events
  • Initialization Toast
  • Customize the toast
  • Autohide and Delay
  • Toast Placement
  • Closing the Toast
22. Scrollspy
  • Set Up Navigation
  • Add Scrollspy Attribute
  • ID Sections
  • Smooth Scroll Behavior
23. Flexbox
  • Flex Container
  • Flex Direction
  • Flex Wrap
  • Align Items
  • Justify Content
  • Align Self
  • Ordering
  • Responsive Flex
24. Grid Layout
  • Grid Container
  • Grid Row
  • Column Classes
  • Responsive Breakpoints
  • Offsetting Columns
  • Ordering Columns
  • Auto Layout Columns
  • Equal-width Columns
  • Alignment and Justification
25. Font Awesome
  • Include Font Awesome
  • Access Font Awesome icons
  • Icon Sizing
  • Icon Colors
  • Stacking Icons
  • Rotating and Flipping
26. Template design
  • Header design
  • Footer design
  • Content design
  • Product Card design
  • Catalog design
  • Form design
27. Project
  • Portfolio Website Design
  • News Website Design
  • E-commerce Website Design
  • Real Estate Website design
CCIT Notes

The CCIT Bootstrap Notes Book offers concise guidance on mastering Bootstrap for responsive web development. Covering grids, components, and customization, it's an essential resource for creating modern, visually appealing websites.

  • Theory Notes
  • Course Book
  • PPT Notes
Certificate

Elevate your career prospects with CCIT's Bootstrap Certificate, recognized by leading companies. As an ISO-certified institution, our certificate features QR code verification, ensuring authenticity and opening doors to top-tier opportunities in the industry.