Practical Modern Web Projects Using Bootstrap 5

Learn to source free media for web projects using Pixabay and Pexels, finding images, videos, music, GIFs, and more, and download in your desired size.

Download Bootstrap five source files, extract them, copy into your new project folder, and use the dist CSS and Bootstrap bundle JS in Visual Studio Code for your Bootstrap projects.

Link bootstrap to your pages by locally referencing the dist/css/bootstrap.min.css and dist/js/bootstrap.bundle.js, or use CDN links, creating a reusable bootstrap template for all projects.

Access the bootstrap css by opening the downloaded bootstrap folder, then dist/css/bootstrap.css to view styles and understand bootstrap’s color variables behind the scenes, without editing the source.

Create a bootstrap-based stock photo project with a responsive navbar that expands at LG, uses a toggler for small screens, and loads bootstrap icons via CDN in Visual Studio Code.

Master building a Bootstrap 5 navbar with a toggle button and a collapsible menu. Configure data-bs-toggle and data-bs-target, ARIA attributes, and choose between local Bootstrap references or a CDN.

Build a responsive navbar in Bootstrap 5 by wiring the navbar-nav list inside a collapse with a matching id, and create button links using btn-outline and btn-light with proper spacing.

Learn to style and customize the Bootstrap 5 navbar by adjusting colors, the navbar toggler, borders, fonts, spacing, and responsive behavior.

Build a Bootstrap 5 hero section with a centered layout, a display-4 heading, a responsive search box with input group and primary button, and a trending list of topics.

Style the hero section with css, overlaying a linear gradient on a background image, set min-height 100vh with cover, and add a responsive search box and trending links with hover.

Learn responsive web design with bootstrap, set min-height to 100vh, peg the hero height at 400px at breakpoints, and reduce the search box width to 90% on small screens.

Build a tags section with Bootstrap 5, using container md widths and a 12-column row, with shadow anchors for tags: nature, people, architecture, technology, business, travel, food, animals, sports, education.

Style the popular tags with a custom class, adding padding, a faint border bottom, and an off-white background, then use inline-block and hover transitions for responsive sizing.

Learn to build a bootstrap 5 footer with semantic markup, container sm, four-column layout on large screens, two columns on medium, and one on small screens, with links and icons.

Style the website footer with css and bootstrap: apply background, borders, spacing, typography, remove bullets, color links, add hover effects, and align social icons to the right with responsive sizing.

Build a three-column masonry grid with a photo card and hover overlay that reveals the photographer and actions (love, download, bookmark) using bootstrap icons; observe css cascading and overrides.

Explore styling a masonry grid with column-count three and a 20px gap, including image sizing, hover zoom, and a gradient overlay using flexbox.

Learn to style a Bootstrap 5 masonry grid with white photographer content, hover effects, and responsive column counts from three to two to one, including spacing and anchor styling.

Master styling a load button with bootstrap 5, including outline dark, centering, and custom padding and font size, plus grid and flex layout notes.

build a portfolio cv site with bootstrap 5, link external resources such as font awesome cdn and google fonts cabin, enable smooth scrolling and basic hosting ideas.

Choose cabin from Google Fonts and apply it site-wide via CSS import. Build a responsive Bootstrap 5 navbar with a toggler and smooth scrolling using data attributes.

Learn to build a responsive Bootstrap 5 navbar with a collapsible menu, toggler, and navbar-collapse, using navbar-nav, nav-item, and nav-link to anchor sections via IDs.

Learn to customize bootstrap 5 navbars by defining root color variables, applying them with var(), and adjusting text, links, and the navbar toggler and borders.

Learn to make a Bootstrap 5 navbar responsive by adjusting font sizes and the toggler at breakpoints down to 240px, including optional brand hiding and text-break for long words.

Build a hero section using bootstrap 5 with a centered two-column layout, a circular profile image, a bold display heading, a lead paragraph, and two links to portfolio and contact.

Style the hero section of a bootstrap 5 project with a 100vh minimum height and a css variables gradient, using flex to center content and responsive md adjustments.

Explore how to craft a responsive hero section in Bootstrap 5 by using media queries around 768px, centering text and images, and switching from row to column layouts with flex.

Create an about me section with bootstrap 5, a responsive stacked layout, a rounded image with shadow, and a details block showing name, location, and experience.

Learn to style an about me section with a universal section title and underline using the after pseudo-element, relative positioning, responsive center alignment, and a custom download button in Bootstrap 5.

Build a bootstrap 5 portfolio section with a padded container, a portfolio id, and a responsive grid with gutters and image overlays, including titles, descriptions, and a view details button.

Style a responsive Bootstrap 5 portfolio item with a relative container and absolute overlay; center text with flexbox and reveal on hover using opacity, image scale, and small-screen font adjustments.

Build a bootstrap 5 skills section with anchored navigation, a centered section title, and multiple progress bars at 95%, 80%, 85%, and 90% to showcase expertise.

Learn to build a responsive skillset section with Bootstrap 5 by nesting divs, configuring gutters and responsive columns, centering text, applying shadows, and using Font Awesome icons for each skill.

Apply practical Bootstrap 5 styling to a skills section by configuring background colors, borders, padding, hover transforms, and responsive typography and layout for different screen sizes.

Create the my experience section using a two-row, two-column bootstrap 5 grid. Include entries for senior web developer and web developer, then plan styling for the next lesson.

Explore building an education section with bootstrap 5, structuring content in a responsive grid using col lg, offset lg, and a timeline with date, title, and text blocks.

Style a bootstrap 5 education timeline by configuring date colors, bold titles, and paragraph spacing, then adjust responsive paddings and margins for different screen sizes.

Design a Bootstrap 5 contact section using a 12-column grid, cards with shadows and borders removed, and icons from Font Awesome to display address, email, phone, and social links.

style the contact social icons as centered inline-flex circles with hover transitions, moving up and turning white text on a primary background, while adjusting typography and spacing for responsive layouts.

Build a Bootstrap 5 footer with a container, centered text, no bottom margin, and a © symbol; apply a secondary background and white text, with section links by ID.

Build a four-page travel blog with Bootstrap 5, featuring a responsive home and blog, travel post pages, navigation, footer, and a css-only back-to-top button.

Set general site styling with a Segoe UI font, off-white background, and dark text; implement a responsive back-to-top control and bootstrap button size adjustments from lg to sm.

Build a responsive Bootstrap 5 navbar using a semantic nav element, with a white sticky top header that expands on large screens and collapses on small screens via a toggler.

Create a responsive bootstrap 5 collapsible navbar inside a container, linking a navbar collapse with a toggle using data-bs-target and matching id, with nav items and a search form.

Apply responsive styling to the Bootstrap 5 navbar by adding a box shadow, adjusting the toggler and padding at breakpoints, and shrinking nav item fonts.

Structure a responsive, semantic footer using Bootstrap 5 grid, with a heading, links row, a horizontal rule, and a social icon row built with Font Awesome.

Structure the bootstrap 5 footer in part 2, with sections for quick links, popular destinations, and categories, using unordered lists, text white, and responsive styling.

Copy the navbar, footer, and scroll-to-top across all pages, link bootstrap.js for interactive components, and apply the same layout to blog, travel post, and home pages.

style the hero section with a rgba overlay on a background image, center and cover it, adjust typography and padding, and enable responsive behavior using min-height and flex wrap.

Create a responsive about section with Bootstrap 5, using a container row, a col-lg-6 layout, an image with fluid sizing and rounded corners, and text that wraps on small screens.

Learn to structure destination cards in Bootstrap 5 by building a three-column responsive row with image top, card body, a popular badge, and a discover more button.

Style destination cards with CSS and Bootstrap 5, featuring a featured badge, absolute and relative positioning, hover effects, shadows, and responsive adjustments.

Create a responsive meet the palm tree block team section in Bootstrap 5 using a three-column grid (md) inside a row, with padding and a shadowed card layout.

Learn to style team icons with font awesome, adjust hover colors, and control responsive typography and spacing using bootstrap containers and rows.

Create a Bootstrap 5 travel gallery with six-image grid that shifts from three per row on large screens to two and then one, including gutter and a view gallery button.

Style a travel photo gallery with Bootstrap 5 by applying a uniform border radius, fixed image height, hover transform, and object-fit cover for sharp, proportional images.

Build a responsive get in touch section using Bootstrap 5, featuring a map embed, contact details with icons, and a two-column layout with containers, rows, and adaptive spacing.

Create a travel blog header with Bootstrap 5 by building a centered, bold display heading inside a blog header container, mirroring it across travel post and blog pages.

Learn to build a Bali Indonesia destination background in a travel page using Bootstrap 5, with a center-aligned title, overlay gradients, and responsive overlay techniques.

Learn to build a responsive Bootstrap 5 info box layout using a two-column grid with an aside, and style the box with a header, icon, padding, and shadows.

Build a top attractions section with Bootstrap 5 using an info box, a responsive two-column layout, Font Awesome icons, and a list group flush for clean borders.

Demonstrates turning the top attractions list into a food and drink section using Bootstrap list group flush, Font Awesome icons, and Bootstrap text styling for a blue highlight.

Build a Bootstrap 5 where to stay section with a responsive card grid, image top, and card body, aligning hotel cards like Nusa Dua with md gutters and object-fit cover.

Learn to build a responsive best time to visit section with Bootstrap 5, featuring an info box, a calendar header, and a flex, wrapped list group with badges.

Build a practical info panel in Bootstrap 5 using an info box, Font Awesome icons, and a flush list group to present language, currency, power, and internet details.

Learn to build a responsive two-by-two photo gallery with Bootstrap 5, using a 50% grid, gallery-info styling, icons, and breakpoint adjustments for full-width on small screens.

Build a responsive blog page with bootstrap 5, using a 12-column grid and a latest post card with a badge, fixed-height image, and a read more button with hover effects.

Build responsive blog post cards in Bootstrap 5 by adding text breaks to badges, adjusting image height for smaller screens, and using 100% height with gutters for uniform balance.

Learn to implement Bootstrap 5 pagination with a semantic nav and accessible controls, including active, disabled states, ARIA attributes, and responsive flex wrapping.

Launch a featured post section called picture of the month, placed after navigation, using Bootstrap padding, margins, and a relative container to support absolute image and category badge.

Explore Bootstrap styling for a featured post, using relative and absolute positioning, overflow hidden, hover transforms, image fitting with object-fit cover, and a gradient overlay for responsive visuals.

Learn to implement a responsive bootstrap 5 sidebar categories panel using info box styling, list group items with badges, and flex utilities for aligned, wrap-enabled layouts.

Build a responsive popular posts section with Bootstrap 5 using a list group and flex layout, featuring a thumbnail image, post title, and date with hover effects and controlled borders.

Explore building an about Pam's blog section with Bootstrap 5, including center-aligned rounded images, headings, text blocks, and a full-width outline button while discussing semantic div usage and responsive adjustments.

Learn to build a responsive subscribe to newsletter form with Bootstrap 5, using form controls, email input, and a full-width subscribe button.

Build a blog post page with a header and content, using a Bootstrap grid aside that includes categories, newsletter, and a you may also like section with related posts.

Create a semantic blog header with Bootstrap 5, implement a breadcrumb navigation using an ordered list, aria labeling, and a responsive container setup, with breadcrumb item styling and active state.

Learn to build a blog header with a Bootstrap 5 badge, a bold heading, and an author block including a circular avatar and post meta icons.

Apply Bootstrap 5 techniques to finish the blog header: center content with justify-content-center, refine spacing and icons, and customize breadcrumbs for responsive design.

Create a responsive table of contents using Bootstrap 5, featuring a styled container, headings, an unordered list with anchors, and hover effects that underline links.

Create a responsive blog article layout using Bootstrap 5, with a blog content container, anchor targets, images, text breaks, and styled block quotes to showcase clean typography.

Design tag badges with bootstrap badge colors (bg success, bg warning, bg info), then implement a share section with circular icons using flexbox, hover transitions, and responsive sizing.

Demonstrates building an author box with Bootstrap, a flex container with responsive wrapping, an avatar image, and follow and contact buttons with Twitter and envelope icons.

Learn to structure a modern Bootstrap 5 business site with a responsive offcanvas navbar, dual carousels, a brand with a logo image, and Bootstrap icons inside a container fluid.

Learn to build a responsive Bootstrap 5 navbar with a toggler and offcanvas, using data-bs-toggle, data-bs-target, and accessible aria labeling.

Explore how to build a responsive Bootstrap dropdown menu within a navbar, including dropdown toggle, aria attributes, off-canvas behavior, and integrating social icons and SVGs.

Insert bootstrap icons as svg into anchors from icons.getbootstrap.com, color and size them with CSS, then configure the off canvas navbar with expand lg and matching id via data-bs-target.

Style the navigation in Bootstrap 5 by embedding Google Fonts Ubuntu and Lilly Script, customizing colors, font sizes, and SVG icon sizes, and refining the brand image.

Learn to create a bootstrap 5 filter section in the footer, using a no-gutter row, a full-width code-12 column, and typography and spacing utilities for clean design.

Explore responsive navigation and footer design with Bootstrap 5, adjusting navbar brand, toggles, off-canvas elements, and icon sizing for various screen widths.

Learn to build two side-by-side Bootstrap 5 carousels (text and pictures) with a fluid container, responsive md6 columns, fade transitions, a carousel inner with items and captions, and text styling.

Learn to build a Bootstrap 5 image carousel with fading transitions, indicators and controls, multiple slides with IDs and active states, and responsive captions that show only on small screens.

Master a Bootstrap 5 carousel with previous/next controls, indicators, and responsive typography, including aria attributes and responsive hide rules for captions.

Create a responsive brand section in bootstrap 5 using the grid, gutters, container-fluid, and row-cols; style headings, borders, shadows, images, and text for a polished brand layout.

Master Bootstrap 5 to build a responsive CEO section with a two-column layout, image rotation, and a CEO speech card, using breakpoints, object-fit, and z-index for clean stacking.

Build a responsive team section in Bootstrap 5 by creating a fluid container, a row with gutter, and three-up columns on md+ screens, including team member cards with social icons.

Finish the teams section by duplicating and updating team member blocks, assigning roles and images, and applying responsive margins to ensure a clean layout from desktop to mobile.

Build the visit us section and map with bootstrap 5, creating a responsive two-column layout (md7 and md5) inside a container lg, and embed a 100% width Google Maps iframe.

Build a responsive Bootstrap 5 form using the grid system with md6 and sm7 columns and gutters. Include inputs, input groups with text and placeholders, and a button width 100%.

Fine-tune Bootstrap 5 components to finish responsive layouts. Adjust font sizes, padding, borders, and min-width for input groups, dropdowns, and nav elements.

Master finishing touches in a bootstrap 5 project by adding text breaks to team and contact sections and refining CSS for responsive font sizing across viewports.

Build a responsive Bootstrap property site with structured files (index, details, contact) and local assets, linking Font Awesome and Cabin fonts for navigation across home, properties, agents, and testimonials.

Structure a responsive navbar with Bootstrap 5, using sticky top, expand lg, a collapsible navigation section, a brand, and navigation links to home, contact, properties, agents, testimonials.

Duplicate the Bootstrap navbar across home, contact, and details pages by copying and adjusting links, then review nav item and nav link styling with hover effects.

Learn to style a navbar using custom CSS variables and Bootstrap cues, set a primary color, override toggler and border colors, and add hover and transition effects.

Explore how the bootstrap 5 navbar adapts to small screens by adjusting the brand size, collapsing the menu, and resizing the toggler through media queries around 270 to 300 pixels.

Structure a responsive Bootstrap 5 footer using container, row, and a 12-grid layout with md breakpoints. Include social icons, quick links, and a newsletter form with input group and form-control.

Develop a styled footer by applying a dark background and white text, structured spacing, bold footer titles, social icons with hover transitions, clean footer links, and a subtle copyright row.

Learn to make a bootstrap 5 footer responsive by inspecting the page and resizing fonts for footer text, social icons, footer links, headings, and form controls.

Build a Bootstrap 5 hero section with a linked navigation to the hero, a background image, and a responsive search form featuring property type, location, and price range.

Style the hero section in Bootstrap 5 by layering a linear gradient over a background image, center the text, and apply white text with a subtle shadow.

Learn to implement and customize the contact page hero section with Bootstrap 5, duplicating the home page hero, updating images, text, and styling for consistency.

Create a responsive featured properties grid with Bootstrap 5, showcasing image cards with prices, features, and an outline detail button that opens the details page in a new tab.

Learn to add Font Awesome icons to a Bootstrap 5 page, adjust margins, and duplicate property cards to create a consistent similar properties section on both home and details pages.

Style the featured properties section in Bootstrap 5, adding a centered view all properties button, responsive property cards with hover effects, absolute pricing, and flex feature rows.

In this lecture, fix the misused background property by using background image, then implement responsive tweaks for featured properties, adjusting image height, fonts, padding, and layout across breakpoints.

Structure of our agents section in bootstrap 5 mirrors the properties layout, using a light background, a container, and a grid of agent cards with images, names, and contact icons.

Style the agents section in bootstrap 5 by aligning the agent card and image with shared properties, hover effects, and responsive adjustments. Use color variables and typography controls for consistency.

Build a responsive Bootstrap 5 testimonials section with a three-column layout on large screens, two on medium, and one on small, with a white background.

Create a contact page call-to-action in bootstrap with a centered h2, lead paragraph, and a get started today button linking to home, featuring hover and responsive styling.

Design a responsive contact us section in bootstrap 5, implementing a two-column grid (lg five, lg seven) inside a white, padded card with font awesome icons for map and phone.

Build a responsive contact form with Bootstrap 5 by using form controls, inputs, a select menu, a textarea with rows, and a submit button within a row and columns.

Build a responsive property header for the details page using Bootstrap 5, featuring a left text block with the property title and location and a right aligned price display.

Explore a Bootstrap 5 property gallery layout featuring a carousel and an agent card, grid-based responsiveness, centered circular agent image, contact details, and a full-width call-to-action button.

Build a Bootstrap 5 carousel by structuring the container, wiring indicators to its id, and implementing customizable previous and next buttons with data attributes.

Build a Bootstrap 5 carousel with an active first item, inner items, and indicators, using object-fit cover images and rounded styling for a smooth, responsive experience.

Master responsive design for the property gallery by tuning breakpoints, margins, carousel image height, and typography to keep the gallery, prices, and agent details readable on all screens.

Demonstrates building a property details section with Bootstrap 5, using container, row, col-lg-8 and col-lg-4, and a responsive table for property data and a schedule a tour form.

Customize bootstrap 5 tables by localizing backgrounds and refining property detail styling, including font size, line height, media queries, and responsive overflow.

Build a responsive schedule tour form using Bootstrap 5, featuring date input, time select, name, email, phone, and message fields, styled containers, and a full width submit button.

Structure a features and amenities section in bootstrap 5 with a container, padding, a row of feature boxes, icons, headings, and bullet lists.

Apply bootstrap 5 margins to style the features and amenities, adjusting bottom margins and layout to create balanced, responsive blocks.

Create a map and neighborhood section using Bootstrap 5, with a white background, a responsive map container, and a points of interest list to showcase location details.

Explore styling a map container with border radius and overflow hidden to preserve curves across breakpoints. Adjust height and padding for a responsive Bootstrap 5 property showcase.

Build a responsive online course platform with Bootstrap 5, featuring navigation, a carousel and cards, top categories with Font Awesome icons, hover effects, sticky course details, and responsive add-to-cart layouts.

Learn to select and embed the Cabin font from Google Fonts, apply it via CSS, and build a Bootstrap navbar with a container fluid and responsive behavior.

Build a responsive shopping cart dropdown for Bootstrap 5 that appears below large screens and is hidden on larger viewports. Use data-bs-toggle, aria-expanded, and an absolute dropdown menu.

Configure the navbar brand by pairing a logo image with bold span text, styled via Bootstrap classes and custom CSS. Set size, margins, and responsive behavior.

Implement a responsive Bootstrap 5 navbar with a toggle button, collapsible navigation, and an explore dropdown, wiring data-bs attributes and dropdown items for accessible, styled menus.

Finish the explore dropdown with aria-labelledby for accessibility, then build a responsive search box using Bootstrap form-control and a Font Awesome icon, applying box shadow, borders, and z-index.

Learn to build a Bootstrap 5 dropdown menu in a navbar with nav items and a learn more button, using ARIA attributes for accessibility and responsive behavior.

Build a responsive Bootstrap 5 navbar featuring a shopping cart icon and sign up and login buttons, using ul and li lists and visibility breakpoints.

Explore how to build a responsive navbar within Bootstrap 5, applying practical techniques to adapt navigation across devices in modern web projects.

Learn to structure a Bootstrap 5 footer with a responsive four-column layout, logo, language switch, and navigational links, plus a centered bottom copyright section.

Style the footer with a black background, white text and links, and a responsive 50% width layout on small screens; include a 40x40 logo, language button, and hover-underlined links.

Learn to build a responsive footer in Bootstrap 5 by using max-width breakpoints, overriding widths with important rules, and scaling fonts, padding, logo size, and layout for small screens.

Duplicate the course page's navigation and footer on the home page by copying, pasting, and aligning the title so both pages share the same navigation and footer.

Build the course page with a semantic main and a course hero section, using a two-column layout (col-lg-8 and col-lg-4) and responsive visibility for the course card.

Learn to build a bootstrap 5 course page with a breadcrumb navigation, accessible aria labels, and a styled course hero, including responsive headings and headlines.

Assemble a course stats block with two inner containers, layout using flex, and render a five-star rating using Font Awesome icons (four full stars and a half star).

Design a responsive instructor profile section using Bootstrap and flexbox, featuring an avatar, the instructor name, and date, plus a date and subtitle area with Font Awesome icons.

Explore responsive design for the course hero content with Bootstrap 5, adjusting flex wrap, text breaks, font sizes, and breadcrumb visibility across breakpoints.

Create a responsive course card with a white background, subtle box shadow, and rounded corners, featuring a background image with a centered font awesome play icon using flexbox.

Build a Bootstrap 5 card body to display pricing at 89.99, add a buy button and add-to-cart, and include a 30 days money-back guarantee and course includes.

Learn how to build a responsive course includes section using Bootstrap 5, with repeated includes items, Font Awesome icons, and flexbox for centered, wrapped items; compare button vs anchor.

Showcases responsive design techniques for the Bootstrap 5 course card, resizing buttons, adjusting font sizes, and using flex wrap and padding tweaks to preserve layout at small breakpoints.

Duplicate the course card, implement a sticky top variant for large screens, and toggle visibility with responsive css using display properties and a negative margin to pull it upward.

Create responsive two-part what you will learn layout in Bootstrap 5, with semantic class names, borders and padding, and a check icon for each item that stacks on medium screens.

Explore responsive web layouts in bootstrap 5 by adjusting margins, padding, and font sizes; style h2; enable flex wrap; and implement a sticky header as content expands.

Build a course content header in Bootstrap 5 using flex, with a header and a content stats block detailing 27 sections, 158 lectures, and 67 total length.

Build a Bootstrap 5 accordion with headers, collapse behavior, and show state, using data-bs-toggle, data-bs-target, aria attributes, and responsive spacing and animated icon rotation.

Build a Bootstrap 5 accordion with a collapse body, create lecture items featuring title and duration, and style with flex, padding, borders, and a gray active button background.

Explore responsive accordion styling in bootstrap 5 by hiding extras at targeted breakpoints, shrinking padding and fonts, and overriding styles with css to ensure readable content on small screens.

Finish the Bootstrap accordion by assigning unique collapse targets and IDs, updating data-bs-target and aria attributes, so each item opens independently. Add a more button styled with btn outline dark.

Design a frequently bought together panel in Bootstrap 5, featuring a cost aside container and a list group of links, styled with white background, box shadow, and rounded borders.

Learn to assemble a Bootstrap 5 item row by placing an image, text details, and a rating block with orange stars, using flex wrap, margins, and borders for responsiveness.

Showcases duplicating Bootstrap 5 list group items, adjusting padding and hover, and building a responsive frequently bought together section with a total and add-to-cart button using flexbox.

Explore responsive design for the frequently bought together section using Bootstrap 5, adjusting flex wrap, text break, font sizes, paddings, and image scales across breakpoints.

Explore how to design an instructor profile within a Bootstrap 5 layout, adding a top shadow, responsive flex containers, and styling for avatar, name, and rating.

Master responsive instructor profile design in Bootstrap 5 by tuning flex wrap, avatar and name sizing, and icon margins to preserve layout across breakpoints.

Build a student reviews section in Bootstrap 5 using a reviews container, a titled h2, and a responsive grid with rating stars and progress bars.

Fix student reviews responsiveness by placing the row inside a Bootstrap container to negate margins, ensure text breaks properly, and use the display-4 class with viewport width for responsive typography.

Learn to build a responsive student reviews section in Bootstrap 5, using container fluid, a four review box layout, flex rows, and styled reviewer avatars, names, and dates.

Demonstrates building and styling student review cards with Bootstrap 5, including star ratings, responsive layout, and a show more reviews button.

Demonstrates building a more courses section with bootstrap 5 cards, a stretched link, responsive grid, badges, tooltips, white backgrounds, and pricing details.

Demonstrates building the home page 'recommended courses' by duplicating John Smith's course grid, updating titles, ratings, prices, and Bootstrap badges for a responsive, polished layout.

Learn to build a bootstrap 5 tooltip structure inside a relative course box, position tooltips absolutely, and replicate across sections, including heading, description, features list, and an add-to-cart button.

Master tooltip content styling in Bootstrap 5 by building hover reveals with absolute positioning, opacity transitions, and controlled display of the tooltip.

Transform a ul checklist into a clean, bootstrap-friendly list by removing bullets and left padding, using a before pseudo-element with a green tick, and adjusting margin and font size.

learn to build a tooltip arrow using a before pseudo-element, form a css triangle with borders, and align a last tooltip to shift left while others shift right.

Learn how to make Bootstrap 5 tooltips responsive by switching to downward placement below 992px, centering arrows, and adjusting padding, font size, and width for clean overlays.

Improve user experience by adjusting Bootstrap 5 tooltips' content and positioning for consistent hover access, using left 100% and top 100% to keep tooltips inside the target area.

Build a Bootstrap carousel with carousel-inner and carousel-item, mark the first slide active, and apply a rgba overlay using absolute positioning. Tweak background-position and background-size: cover, plus edge-aligned navigation arrows.

Optimize a Bootstrap 5 carousel for responsiveness by tuning width and max width, font sizes, padding, and indicator visibility across breakpoints.

Reimagine your career with Bootstrap 5 layouts, a responsive grid, and cards. Build image-backed sections with rounded corners, stretch links, and clean typography for a polished UI.

Apply responsive design techniques in Bootstrap 5 by adjusting containers, padding, and font sizes, observe flex wrap behavior, duplicate and customize items, and plan next steps toward top categories.

Create the top categories section using a Bootstrap 5 grid, containers, and responsive columns, style category cards with icons, text breaks, and hover effects for a polished UI.

Style category cards with a 1px solid border, 1rem padding, centered text, and hover effects that switch background and cursor. Explore responsive tweaks and font-size rules for row children.

Design a responsive two-column section for Pamchdemy for business using Bootstrap 5, with a text block and an image, styled bullets, and a flex layout for alignment and spacing.

Build a trending courses section with Bootstrap 5, featuring a three-equal-part, 12-column grid layout, an H2 heading, link styling with no underline, muted paragraphs, and a clear call-to-action button.

Explore popular topics by building a topics container with 16 topic badges, using flex wrap, hover interactions, and responsive typography.

Explore building a 'become an instructor' section with a Bootstrap 5 layout: a two-column responsive row, border radius tweaks, off-white bg, and a 'start teaching today' call-to-action.

Explore building a responsive testimonials section with Bootstrap 5, using a grid of three equal columns, flex layout, avatars, shadows, and accessible typography.