The Complete Bootstrap 4 Guide: Beginner to Advanced

Apply Bootstrap playground custom classes to visualize the grid system, using padding, background colors, borders, and height tweaks like a.w.grid, a.w.height, and w highlight for clear layout cues.

Explore flexbox justify-content options—flex-start (default), flex-end, center, space-between, and space-around—and how they affect item alignment. Learn to use auto margins to push items to the left or right.

Explore Bootstrap 4 flex utilities and align-self options, from start to baseline and stretch, with row and column layouts, no gutters, and 100% width demonstrations.

Learn how flex wrap controls item layout and how line content differs from line items in alignment. See examples of start, end, center, between, and stretch behaviors and spacing effects.

Explore Bootstrap typography fundamentals, applying headings with h1–h6 and display classes, using lead and text-muted styles, formatting blockquotes, and styling lists with unstyled and inline options.

Learn Bootstrap 4 text utilities, including left/center/right alignment with breakpoints, text wrap and no wrap, and transform options like lowercase, uppercase, and capitalize.

Explore how Bootstrap 4 renders code blocks using the code and pre tags, including escaping brackets with < and > and enabling scrollable pre sections.

Learn how Bootstrap colors work, using text color classes like text-primary, text-success, and text-muted, plus background color classes such as bg-dark and bg-primary, and how links and hover states behave.

learn how bootstrap spacing works by applying margin classes (all sides, top, bottom, left, right, axis) and inspecting the box model to see how margins affect layout.

Learn to apply responsive margins and padding at breakpoints from xs to xl, observe top and bottom spacing behavior, and understand how overlapping rules affect outcomes.

Explore the new figure and figure caption tags in HTML5, and learn how Bootstrap's figure class adds captions, adjusts image sizes, and enables responsive alignment.

Explore how to style Bootstrap 4 tables with classes like table, table dark, table striped, hover, bordered, small, and responsive, including contextual row colors and header variations.

Learn how to implement screen readers with an sr-only class to hide text from sighted users while making content accessible to visually impaired users, and test with voice over.

Explore media objects in Bootstrap 4, learning how to create media with a profile picture and text, add media body, nest components, adjust alignment, and control order and lists.

Learn to implement Bootstrap 4 alerts with contextual color classes, add alert links and headings, and enable dismissible alerts with fade, show, and mb-0 spacing.

Explore how to implement Bootstrap 4 dropdowns, including drop up, left, and right variations, split buttons, and menu items with headers, dividers, and active or disabled states.

Explore dropdowns in Bootstrap 4, including nested dropdowns with a form, adding a dropdown menu class, and showcasing active and disabled items as you save changes.

Explore Bootstrap 4 cards: structure with a card wrapper, image top, card body, title, text, and a button. Learn sizing and list groups, headers, and image options.

Learn to style Bootstrap 4 cards with border and text color utilities, and organize them with card groups, decks, and columns for a masonry grid.

Explore Bootstrap 4 input groups, including prepended and appended text, form controls, sizing, checkboxes, radios, multiple inputs, button add-ons, dropdowns, and segmented buttons.

Learn to build Bootstrap 4 navigation with navs, nav items, active and disabled states, horizontal and vertical alignment, tabs, pills, dropdowns, and javascript-enabled tab switching.

Explore how to configure Bootstrap 4 nav bar with a toggle button and external content, compare hidden versus visible brand behavior, and ensure the data target matches the id.

Explore Bootstrap 4 progress bars, including creating the bar, setting widths (25–100%), applying colors (bg-success, bg-warning, bg-danger), and using striped, animated, and multi-bar configurations with labels.

Explore Bootstrap 4 popovers, configuring data-toggle and data-placement for top, right, bottom, and left positions. Discover advanced popovers with titles, dismissible options, and triggers like focus, click, and hover.

Explore how to build and customize Bootstrap 4 modals, including modal structure with dialog, content, header, body, and footer, dismissal, data attributes, tooltips, popovers, and nested grid layouts.

Explore bootstrap scrollspy by implementing data-spy and data-target, enabling active nav highlighting with pills and nested menus, and applying it to list groups and full-page examples.

Set up a bootstrap 4 project by creating index.html, using the bootstrap CDN with jquery and popper in order, and adding styles.css while comparing portfolio start to finished files.

Design the project's look by importing the Montserrat font, setting body background and text colors, styling anchors and hover states, and adjusting list item spacing for a Bootstrap 4 layout.

Learn how to add an image and style the content in a two-column Bootstrap 4 layout, applying aw-image and aw-content classes, and set a full-height, centered background image.

Learn to style unordered lists in Bootstrap by applying aw-list, aw-list-headings, and aw-credit classes, adjusting font weight, size, line height, margins, color, and opacity for responsive layouts.

Finish a bootstrap 4 project by using a main wrapper and content wrapper with overflow auto. Constrain to 600px at large breakpoints and center at 1400px.

Learn to build a Bootstrap-style contact modal with accessible markup, including header, body, close button, and a form with message and email fields, and a send action.

Finish the project by adding a bootstrap 4 media query at 576px and switching the nav bar from dark on small devices to transparent on large screens, countdown timer.

Create a franchising page in Bootstrap 4 by editing a template in Visual Studio Code, adding a section with text, an image, and domestic and enter national buttons.

Build locations page by copying the template, activating the locations nav, and laying out a Bootstrap section with a search input and actions for current location, reserve, and view hours.

Build the rewards page by copying the template, updating navigation and sections, and styling the header, text, and action buttons to create an active, centered rewards section.

Extend the menu page by adding a new section with id menu-items and an accordion div for items, then duplicate for drinks, appetizers, meals, and desserts, and adjust 1200px margins.

Add show to display meal items first, and build a Bootstrap 4 row of meal cards with image, title, description, and an order link.

Explore how SAS, a CSS preprocessor, lets you write code with variables and mixins while omitting braces and semicolons. Run it through the preprocessor to export regular CSS.

Install and set up Visual Studio Code, add essential extensions like Live Server and SAS for syntax highlighting, with optional IntelliSense for CSS extensions to enhance your bootstrap workflow.

Discover how to create and apply an scss mixin for border radius and box shadow using variables, and reuse it across multiple boxes with include to reduce repetition.

Learn partials and imports in a Bootstrap 4 starter, using Koala to pull folders. Organize variables, mix ins, and widgets with lead underscores for a main SPSS export to CSX.