Master Bootstrap 5 from Scratch with Projects

Learn what Bootstrap is and why developers use Bootstrap 5 to build fast, responsive websites with ready-made HTML and CSS templates, components, and plugins.

Master Bootstrap 5 from scratch by using either the compiled css and js or a cdn, then set up index.html and test a container with rows and cols.

Learn to add essential meta tags inside the head, including character set utf-8 and viewport with width=device-width and initial-scale=1.0, to control page dimensions across devices.

Explore how the Bootstrap grid system uses a 12-column flexbox layout with container and container-fluid to create responsive widths across breakpoints.

Master bootstrap 5 teaches using a 12-column grid with container and row, and the col-xx-y classes with breakpoints like sm, md, lg, xl, xxl for responsive layouts.

Learn how to build responsive service grids with bootstrap 5 by using container and row, center aligned text, and col-md-4 items, plus using w-100 for column breaks and bootstrap icons.

Understand how offset creates horizontal space in bootstrap's grid by applying offset-md-5 to center a seven-column content beside a five-column image, with text centered as needed.

Master Bootstrap five's ordering concept by using order-1 to order-5 or order-first and order-last to control column placement. Learn to apply breakpoints to reorder content across small to large screens.

Master bootstrap 5 grid by creating equal width content on a 12-column layout, dividing 12 by the item count to achieve three columns of width four.

Explore how bootstrap's grid handles variable width contents by keeping column sums to 12, with examples like five plus seven and three plus four plus two plus three on screens.

Explore Bootstrap positioning classes to place elements with relative, absolute, fixed, or sticky behavior, using start and end for horizontal alignment.

Master Bootstrap display properties by learning how to toggle elements between inline, block, inline-block, and none, using responsive classes like d-inline, d-block, d-none, and breakpoint variants such as d-md-block.

Explore the difference between flex and inline flex in Bootstrap's display utilities, showing how flex makes the items inline while inline-flex makes the container inline.

Explore flex direction in Bootstrap by applying container classes to set flex row, flex row reverse, flex column, or flex column reverse, noting default flex row and inline flex differences.

Explore justify-content within flex layouts, including start, center, end, between, around, and evenly spaced alignment for responsive layouts.

Explore how align-items controls vertical alignment in flex layouts, demonstrating start, center, end, baseline, and stretch, and contrast it with justify-content for horizontal alignment.

Master align-self in Bootstrap 5 by exploring how each flex child uses align-self start, center, end, baseline, and stretch within a d-flex container.

Explore how rem and em differ: rem scales with the base font size (often 16px), while em scales with the parent element's font size, as demonstrated through concrete examples.

master bootstrap 5 spacing using margin and padding utilities, including m- and p- classes, the 0 to 5 unit scale, and horizontal and vertical centering with mx-auto, text-center, and flex.

Explore bootstrap 5 image utilities, including image-fluid for responsive sizing with max width 100% and height auto, centering with mx-auto, and thumbnail, rounded, and d-block styles.

Learn to align and center images in Bootstrap 5 using floats and clear fix, display block with margins auto, and utilities like image-fluid, thumbnail, and rounded for responsive layouts.

Explore bootstrap background color options, including normal colors and gradient backgrounds, using classes like bg-primary, bg-secondary, bg-success, bg-gradient, and apply them to elements such as the body.

Discover Bootstrap 5 text color classes, from text primary to text white 50, including muted variants, and see how they relate to background color classes with typography in next lecture.

Explore Bootstrap 5 typography utilities, including text alignment (text-start, text-center, text-end), headings (h1–h3), display and font sizes, line-height options, text wrap behavior, and font weights and styles.

Learn to implement Bootstrap icons, including CDN or zip download, embed SVG, and using the icon font with bi- classes; style, size, and search icons for practical UI design.

Explore a hover animation for icons in Bootstrap 5, using a common class to trigger flips and zooms with translate and rotate transforms and a 0.5s transition.

Master how to create bootstrap 5 accordions from scratch, building the container, accordion items, headers, and buttons with data attributes, and controlling which item shows by using show and collapsed.

Explore the Bootstrap 5 collapse component with practical examples, creating collapsible content controlled by three buttons, using container layouts, Bootstrap button classes, and width utilities.

Learn to implement Bootstrap 5 collapse with anchor links toggling content blocks in a responsive grid. Harness data attributes and content sections to reveal content one, two, and three.

Learn to create Bootstrap 5 modals from scratch, using the collapse technique, with modal container, dialog, header, body, and footer, triggerable by a button and a fade effect.

Learn to create a bootstrap dropdown and navigation menu, using a button or anchor tag with a dropdown menu, powered by popper.js.

Create a Bootstrap 5 navigation bar with a responsive collapse, logo, and menu items inside a container, highlighting active links, breakpoints, and a dropdown-ready services section.

Learn to add a navigation dropdown in Bootstrap 5 by applying dropdown, dropdown-toggle, and dropdown-menu with items, while understanding the underlying logic and avoiding copy-paste.

Create a Bootstrap 5 carousel with full-width, full-viewport height, three slides, indicators, and previous/next controls, initialized via data attributes and styled for images to fill width and height.

Learn to build a Bootstrap 5 carousel with per-slide captions by adding a carousel caption inside each item, styling for responsiveness, and media query adjustments.

Create a basic Bootstrap 5 form with labeled inputs inside a container and row. Use the form-control class, id, and for attributes to connect labels to inputs.

Create an inline Bootstrap form by turning the form into a row and using col-6 and col-md-6 to place first name and last name on the same line.

Explore building a select input with bootstrap 5 using form-select classes, creating options like high school, graduate, and post graduate, and see how the next lecture covers radio buttons.

Explore building radio button groups in bootstrap 5 from scratch, using form-check and form-check-input, arranging inline or block layouts, grouping radios by name, and setting a default selection.

Discover how to build Bootstrap 5 input groups using input group text, form controls, and form selects to compose usernames and emails with domain options, plus basic styling tips.

Master bootstrap 5 checkboxes and radio buttons by using form-check, with labeled inputs and a default checked option, previewing in the browser and introducing a future switch box lesson.

Create a switch box in Bootstrap 5 with the form switch class, compare it to checkboxes, and review input types, input groups, radio buttons, select menus, and floating labels.

Learn to implement Bootstrap 5 floating labels by building a form-floating email input with a placeholder and margins. Preview a range input with live value display to be covered next.

Design a Bootstrap 5 range input inside an input group, set min and max from 1 to 5, and display the selected value in an adjacent input group text element.

Display the selected range value in real time by triggering a change event and updating the range value element with a show value function using jQuery.

Create a bootstrap 5 textarea inside a col-md-6 column, style it with form-control, set a bio placeholder, and adjust rows for a compact input.

Create a bootstrap submit button with class btn and btn-danger, set its type to submit, and center it by using a bootstrap column or display block with margins.

Create a beautiful login form using Bootstrap 5, with a card layout, container and row structure, labeled email and password fields, a dashboard switch, and a styled login button.

Style a login form with CSS by setting a dark body, a centered card, rounded inputs, and interactive focus and hover effects, including custom colors, borders, and shadows.

Learn to create a hover effect for a login button using a ::before pseudo-element, absolute positioning, borders, transitions, and transform scaling to enhance interactivity.

Create a custom bootstrap navigation with a glass header, refine brand and link colors, set hover and active states, and adjust height, font size, and spacing for a modern navigation.

Master Bootstrap 5 dropdown customization by adjusting border radius, line height, and text alignment. Set a dark #333 background and transparent dropdown item backgrounds.

Learn to make Bootstrap 5 navigation responsive by styling the toggle icon, borders, and box shadow, applying a 768px media query, adjusting margins, and using JavaScript to manage active links.

Enforce a single active state in a custom Bootstrap navigation using JavaScript and jQuery by removing the active class from all links and adding it to the clicked one.

Transform a bootstrap carousel into an animated slider with a background image, centered captions, and refined spacing; add an overlay and buttons, and plan effects like animation and particles.

Master Bootstrap 5 animated sliders by building a slider with Bootstrap and free plugins, using animate.css for animated captions and delays, and planning a particle background and water ripple effect.

Add a ripple effect to the slider by integrating a jQuery ripples plugin, configure drop radius and resolution on each carousel item.

Learn to enhance a bootstrap 5 slider with a particle background using the particles.js plugin. Adjust particle count, color, shape, size, opacity, and hover interactivity through codepen and js.

Discover CSS syntax by writing styles in a style tag, using selectors and properties to style elements like h1, with inline, internal, and external style approaches introduced for future lessons.

Explore css selectors from element selectors to comma-separated lists, and master descendant, child, and sibling selectors with div, p, and h1, including id and class selectors like #id and .class.

Explore css selectors through practical examples, distinguishing div p from div > p and showing how an id-based div targets only its direct children with child selectors for color changes.

Learn how to include CSS in web pages using inline styles, internal styles, and external stylesheets, including linking a style.css file and using a style tag in head.

Explore CSS colors by using hex values, RGB and RGBA, and learn how to set text color and background color with examples.

Explore CSS borders, including width, style, color, and radius, to create circles and rounded corners, and use outline outside the border with anchor focus outline removal.

Master how css margins create space outside elements, using top, right, bottom, and left values, margins shorthand, and practical examples with default 20px margins.

Explore css padding and how it adds internal space to elements, contrasting with margin, and using shorthand values; see practical examples with anchors and box model in the next lecture.

Explore the CSS box model by showing how content, padding, borders, and margins set an element’s final width and height, including left-right and top-bottom contributions.

Master CSS width and height concepts with line height for vertical centering, and learn to apply background color and text alignment to create a visually striking div.

Master css font-family by learning to specify preferred fonts with fallbacks from Arial to Courier, understand family vs generic names, and distinguish serif from sans-serif fonts with practical examples.

Explore CSS text formatting in Bootstrap 5 by applying text-align, text-transform, text-indent, letter-spacing, and word-spacing to control alignment, casing, indentation, and spacing.

Explore the CSS display property and how block, inline, and inline-block values shape element width. Learn to toggle display on a div, and use none to hide.

Master CSS positioning by exploring static, relative, absolute, and fixed; learn how each type relates to its normal position, its parent, or the browser window, with practical examples.

Explore the CSS overflow property by testing visible, hidden, scroll, and auto values inside a 300 by 300 container, showing how overflow controls hidden or scrollable content.

Explore float and clear in CSS, learn how floated elements are removed from normal flow, why clear is needed, and how to wrap text around images with practical examples.

Learn to use the CSS opacity property to control transparency, create hover effects that restore opacity and change text color, and build a 300px container with relative and absolute positioning.

Apply and control CSS box shadow effects on hover, adjusting horizontal and vertical offsets, blur, spread, and color, including drop shadows and inner shadows with inset.

Explore the CSS text-shadow property by adjusting horizontal and vertical offsets, blur, and color to create emphasized text. Practice with font size, bold styling, and hands-on experimentation.