Bootstrap Mastery

Bootstrap is a free, open-source front-end framework for faster and easier web development. It includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and optional JavaScript plugins.

Key components include the Grid System, Typography, Buttons, Forms, Navigation bars, Modals, Card components, and various utility classes for spacing and colors.

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. It is based on a 12-column layout.

Containers are the most basic layout element in Bootstrap and are required when using the default grid system. They are used to contain, pad, and (sometimes) center the content within them.

.container provides a responsive fixed-width container, meaning its max-width changes at each breakpoint. .container-fluid provides a full-width container, spanning the entire width of the viewport.

In Bootstrap 5, the breakpoints are: Extra small (<576px), Small (≥576px), Medium (≥768px), Large (≥992px), Extra large (≥1200px), and Extra extra large (≥1400px).

You use the .row class. Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.

The Bootstrap grid system allows up to 12 columns across the page. You can group these columns together to create wider columns.

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin on the .row to align content.

Use the .g-0 class on the .row to remove the gutters from a row and its columns.

Offsets are used to move columns to the right. Classes like .offset-md-4 move a .col-md-4 over by four columns.

You can change the visual order of columns using .order classes. For example, .order-last will move an element to the end, regardless of its position in the HTML.

You can use flexbox utilities on the row (.justify-content-center) or use auto margins on the column if it's smaller than the container width.

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.

Starting from version 4, Bootstrap moved to a Flexbox-based grid system. This allows for easier alignment, distribution of space, and flexible column heights.

Use the .col class without a specific number. It will automatically grow to fill the available space in a row.

.col-auto makes the column take only as much width as its content requires.

Use vertical alignment utilities on the row: .align-items-start, .align-items-center, or .align-items-end.

Use self-alignment utilities on the column: .align-self-start, .align-self-center, or .align-self-end.

Bootstrap uses a limited z-index scale to manage layers of content like navigation, tooltips, popovers, modals, etc. These are defined in the SCSS variables.

Bootstrap sets the global box-sizing to border-box. This ensures that the padding and border are included in the element's total width and height.

Reboot is a collection of element-specific CSS changes in a single file, based on Normalize.js, to provide a consistent cross-browser baseline.

Because columns are based on percentage widths, they will wrap to a new line once the sum of column widths exceeds 12 within a single .row.

Classes like .d-none, .d-inline, .d-block, .d-flex are used to quickly toggle the display property of elements across different breakpoints.

Use .d-none .d-md-block. This hides it by default (mobile) and shows it starting from the medium breakpoint.

Bootstrap provides margin (.m-) and padding (.p-) utilities with levels from 0 to 5. Examples: .mt-3 (margin-top), .px-5 (horizontal padding).

It sets margin-left: auto and margin-right: auto, which is commonly used to center fixed-width block-level content.

Use the .sticky-top utility class. It ensures the element stays at the top of the viewport after scrolling past it.

.fixed-top removes the element from the normal document flow and fixes it to the top. .sticky-top keeps it in the flow until its position reaches the top.

Bootstrap 5 introduced ratios (like .ratio-16x9) to manage the aspect ratio of external content like iframes or videos.

In BS5, use the .ratio class along with a specific ratio modifier like .ratio-16x9 on a wrapper around your <iframe> or <video>.

Classes like .float-start and .float-end (renamed from left/right in BS5) are used to float elements.

The .clearfix utility is used to clear floated content within a container to prevent layout collapse.

Use the utility classes .d-block .mx-auto on an <img> tag.

Bootstrap 5 provides low-level z-index utilities (.z-0 to .z-3) and named ones like .z-n1 (minus one).

Utilities like .overflow-auto, .overflow-hidden, .overflow-visible, and .overflow-scroll allow you to control text wrapping and scrolling.

Use classes like .text-start, .text-center, .text-end, or responsive versions like .text-md-center.

The .visually-hidden class hides an element from the visual display but keeps it accessible to screen readers (important for A11y).

Adding .stretched-link to a link inside a component (like a card) makes the entire parent component clickable.

Use the .text-truncate class to truncate long text with an ellipsis. It requires the element to be display: block or inline-block.

On small screens (mobile), it takes the full width (12/12). Starting from medium devices, it takes 8 columns (8/12).

Use .ms-auto (margin-start: auto) on the column you want to push.

It is a utility that sets the element height to 100% of the viewport height (100vh).

It is a utility that sets the element width to 100% of the viewport width (100vw).

Use the .vr utility class in Bootstrap 5 to create a vertical rule.

Bootstrap 5 includes classes like .opacity-25, .opacity-50, .opacity-75, and .opacity-100 to control an element's transparency.

Use the .bg-opacity-* utilities alongside a .bg-* color class. Example: .bg-success .bg-opacity-50.

Bootstrap 5.3+ added object-fit utilities like .object-fit-contain and .object-fit-cover for responsive images and videos.

When using display: grid or flex, you can use .gap-0 through .gap-5 to control the distance between items.

Bootstrap 5 has built-in RTL support. You need to set dir='rtl' on the <html> tag and use the RTL version of the CSS file.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

A modal is a dialog box/popup window. You need a trigger (button with data-bs-toggle='modal') and the modal structure (.modal, .modal-dialog, .modal-content).

These data attributes are used to trigger Bootstrap JavaScript plugins without writing custom JS. toggle defines the behavior (modal, dropdown, etc.), and target specifies the element ID to control.

Use the .navbar-expand-* class on the navbar. Use a toggle button (.navbar-toggler) and a collapsible wrapper (.collapse.navbar-collapse) for the links.

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Use the .carousel-indicators wrapper with <button> elements targeting the carousel index using data-bs-slide-to.

A breadcrumb indicates the current page's location within a navigational hierarchy that automatically adds separators via CSS.

Wrap a series of buttons with .btn in a container with the .btn-group class.

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

Use classes like .dropup, .dropend, or .dropstart on the parent element to change the menu's appearance direction.

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. Use .accordion and .accordion-item.

.btn-primary provides a solid color button. .btn-outline-primary provides a button with a border and no background, filling in on hover.

Use .btn-lg for large buttons and .btn-sm for small buttons.

Badges are small count and labeling components used to indicate a status or count. Example: Notifications <span class='badge bg-secondary'>4</span>.

Use the .rounded-pill utility class on your badge element.

Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Use .alert and .alert-success, etc.

Add the .alert-dismissible class and a close button with data-bs-dismiss='alert'.

Components to show the progress of a task. Use .progress as a wrapper and .progress-bar inside to show percentage via style width.

Use .progress-bar-striped for stripes and .progress-bar-animated to animate those stripes.

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

The darkened background that appears when a modal is opened. It can be disabled with data-bs-backdrop='false'.

Add the .modal-dialog-centered class to the .modal-dialog element.

Scrollspy is a mechanism to automatically update navigation targets based on scroll position to indicate which link is currently active in the viewport.

Tooltips must be initialized via JavaScript because they are performance-intensive. Use the Tooltip constructor: new bootstrap.Tooltip(el).

Tooltips are smaller and used for simple labels on hover. Popovers are larger, can contain more content (like titles), and are often triggered by click.

Offcanvas is a sidebar component that can be toggled to appear from any edge of the viewport. Often used for mobile navigation or shopping carts.

Toasts are lightweight notifications. Use the .toast container and initialize it with JS: new bootstrap.Toast(el).show().

Introduced in BS5, placeholders are used to create 'loading' states (skeleton screens) for your components while content is being fetched.

Use the Navs and Tab JavaScript plugin. Use .nav-tabs and data-bs-toggle='tab' on individual nav links.

Standard pagination for lists or search results. Use .pagination, .page-item, and .page-link.

Use .pagination-lg or .pagination-sm on the <ul> element.

Used to toggle the visibility of content. It can be used for accordions or just a button that hides/shows a div.

Both buttons just need to have data-bs-target='[selector]' pointing to the same ID or class.

It indicates the current selection or the active link in components like navbars, pagination, or list groups.

On buttons, it physically disables the element. On links, it uses pointer-events: none to prevent clicking, but remains focusable unless aria-disabled is used.

Use .spinner-border (outline) or .spinner-grow (pulsing) classes. Use text color utilities for coloring.

Bootstrap 5 added support for horizontal collapsing by adding the .collapse-horizontal class.

Wrap an <input> and <label> in .form-floating. The input must have a placeholder and come before the label.

Extend form controls by adding text, buttons, or button groups on either side of textual inputs.

Use .needs-validation on the form and .is-invalid/is-valid on inputs. You need a small snippet of JS to handle the submit event.

In BS5, use .form-check for the wrapper, .form-check-input for the control, and .form-check-label for the label.

Add the .form-switch class to the .form-check wrapper of a checkbox.

Standardize the appearance across browsers using the .form-range class on a range input.

Use the .form-select class on the <select> element for a custom appearance mirroring other form controls.

Use .figure for the wrapper, .figure-img for the image, and .figure-caption for the caption.

Wrap any <table> with .table-responsive to make it scroll horizontally on small devices.

Use .table-primary, .table-success, etc., on <tr> or <td> elements to color them.

Use .table-striped for alternating row colors and .table-hover to highlight the row on hover.

A generic close button (.btn-close) for dismissing content like modals and alerts. It uses background-image icons.

Stacks provide a shortcut for common flexbox layouts. Use .vstack for vertical and .hstack for horizontal layouts.

Utility classes are single-purpose classes (e.g., .text-center, .mt-5, .bg-primary) that allow you to style elements directly in HTML ohne writing custom CSS.

Use .text-{color} classes like .text-primary, .text-danger, .text-muted, .text-white, etc.

Use .bg-{color} classes like .bg-dark, .bg-light, .bg-warning, etc.

Use .fw-bold, .fw-bolder, .fw-normal, .fw-light, or .fw-italic for font style.

Use .fs-1 to .fs-6 (mapping to H1-H6 sizes) to quickly change font size.

Levels map to multiples of the $spacer variable (default 1rem). 1 is 0.25rem, 3 is 1rem, 5 is 3rem.

Use the .border class. You can specify sides (.border-top, .border-start) and colors (.border-primary).

Use .border-1 to .border-5 classes in Bootstrap 5.

Use .rounded, .rounded-top, .rounded-circle, .rounded-pill, or .rounded-0 to remove rounding.

Use .shadow-sm, .shadow, or .shadow-lg. Use .shadow-none to remove.

Use .flex-row, .flex-row-reverse, .flex-column, and .flex-column-reverse.

Use .flex-wrap, .flex-nowrap, or .flex-wrap-reverse.

.justify-content-start, .justify-content-end, .justify-content-center, .justify-content-between, .justify-content-around, .justify-content-evenly.

.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, .align-items-stretch.

It makes a flex item grow to occupy all available space in its container.

Use the .text-center utility class.

Use the .img-fluid class. It adds max-width: 100% and height: auto.

Applying the .img-thumbnail class gives the image a rounded 1px border appearance.

It hides content that exceeds the element's boundaries (overflow: hidden).

Use .user-select-all (selects all on click), .user-select-auto, or .user-select-none.

Use .pe-none (prevents clicks) or .pe-auto.

.text-decoration-none, .text-decoration-underline, .text-decoration-line-through.

.text-lowercase, .text-uppercase, .text-capitalize.

.lh-1, .lh-sm, .lh-base, .lh-lg for different line heights.

They set width and height to 100% respectively. Available in steps: 25, 50, 75, 100, and auto.

Add the .bg-gradient class to any .bg-* element to apply a subtle linear gradient.

Use .border-opacity-10 to .border-opacity-75 along with a .border color class.

.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top, .align-text-bottom.

Bootstrap 5.3+ added .focus-ring utility to apply a custom focus style to elements.

.link-primary, .link-secondary, etc. These change the color and hover color of <a> tags.

.link-opacity-10 to .link-opacity-100. Also .link-opacity-*-hover.

.link-underline, .link-underline-primary, etc.

It sets visibility: hidden. Unlike .d-none, the element still occupies space in the layout but is hidden from the user.

Fixes an element to the bottom of the viewport.

Use a div with .vh-100 and CSS background-size: cover, or use object-fit: cover on an <img> with .w-100 .h-100.

.text-break ensures long words don't break the layout by applying overflow-wrap: break-word.

Makes the whole card clickable. The card must have position: relative.

.ratio-1x1, .ratio-4x3, .ratio-16x9, .ratio-21x9. Used for responsive media.

.text-sm-start, .text-md-center, .text-lg-end, etc.

Clears floated children within a parent element.

Use the .user-select-none class.

Positioning utilities that set top/left/right/bottom to 0. Used with .position-absolute.

Use .top-50 .start-50 .translate-middle.

Used to center an element only horizontally or vertically using transforms.

.interact-none (pe-none) and .interact-auto.

This usually requires custom SCSS, but provided classes like .form-control:focus set a default ring.

Variables define it as 1rem.

Use .border-0 and then .border-top, or use .border and then .border-top-0.

.align-items-center on the flex container.

Use the .fw-semibold class in newer versions of Bootstrap.

Create a custom SCSS file, import Bootstrap's functions and variables, override variables (like $primary), and finally import the rest of Bootstrap.

It contains all the default values for colors, spacing, fonts, breakpoints, and component settings. Overriding these is the core of customization.

Sass uses the !default flag to assign a value only if the variable hasn't been defined yet. This allows developers to define their own variables before importing Bootstrap's defaults.

Add your color to the $theme-colors map using map-merge before importing Bootstrap's CSS.

The Utility API is a Sass-based tool to generate Bootstrap's utility classes. You can add, remove, or modify utilities by editing the $utilities map.

By setting the specific utility key to 'null' in your Scss before processing the map.

PurgeCSS parses your HTML and removes unused CSS rules from your final bundle. Since Bootstrap is large, this can significantly reduce file size.

Bootstrap uses functions to automatically calculate whether light or dark text should be used on a background to ensure WCAG accessibility.

They serve the same purpose: removing the padding between columns. BS5 changed the naming to follow the new 'gutter' utility pattern.

You can use the CSS only, or use libraries like 'react-bootstrap' or 'reactstrap' which provide pre-built React components mapping to Bootstrap's UI.

You can install 'ng-bootstrap' or 'ngx-bootstrap'. These provide Angular widgets for things like modals and carousels without needing jQuery.

Popper.js is a library used by Bootstrap for positioning tooltips, popovers, and dropdown menus relative to their trigger elements.

To reduce bundle size, improve performance, and move towards modern vanilla JavaScript. Most browser vendors now support the features Bootstrap formerly relied on jQuery for.

Check the migration guide: Rename data-toggle to data-bs-toggle, update form classes (.form-control instead of .form-group), and handle the removal of jQuery.

BS 5.3 introduced a first-class color modes feature, allowing you to toggle 'dark' or 'light' themes via data-bs-theme attributes.

Use JS to toggle the data-bs-theme='dark/light' attribute on the <html> or <body> element.

BS5 uses root-level CSS variables (--bs-primary, --bs-font-sans-serif) for runtime customization without needing to recompile Sass.

You can reference Bootstrap's CSS variables like background-color: var(--bs-primary);.

A tool used during the Build process that adds vendor prefixes (-webkit-, -moz-) to CSS rules based on values from Can I Use.

Use semantic HTML, appropriate ARIA attributes (aria-label, aria-expanded), and ensure high color contrast.

Static modals are defined in the HTML. Dynamic modals are created/content is inserted via JS before showing.

Use the loading='lazy' attribute on <img> tags within the carousel items.

It defines the huge $utilities map that the API uses to generate all the single-purpose classes like .display, .spacer, etc.

Modify the $grid-breakpoints map in your Sass variables file before importing Bootstrap.

Mixins like make-container(), make-row(), and media-breakpoint-up() allow you to apply Bootstrap's logic to your own custom class names.

@include media-breakpoint-up(md) { ... } allows you to write CSS that only applies from the medium viewport up.

A Sass map that defines the maximum width of a .container for each breakpoint.

.nav is for generic navigation (tabs, pills). .navbar is specifically for site headers with support for branding, toggling, and specialized layouts.

Set .dropdown-static on the parent and use the grid system (.row and .col) inside the .dropdown-menu.

You can change $box-shadow and $box-shadow-sm in Sass to change the look of all shadow utilities at once.

Include the link and script tags in your HTML <head> and before </body> from providers like jsDelivr or cdnjs.

Bower was a package manager formerly used for Bootstrap. It is now deprecated in favor of NPM/Yarn.

Events include show.bs.tooltip, shown.bs.tooltip, hide.bs.tooltip, and hidden.bs.tooltip.

Vite is a modern build tool. You install bootstrap via npm, and import the Scss file into your main entry point.

Override the $font-family-base variable in your Scss.

It uses an SVG background-image encoded in the CSS. This avoids needing an external icon font for just a close button.

A small CSS file that provides better cross-browser consistency in the default styling of HTML elements. Bootstrap's Reboot is based on it.

Bootstrap doesn't provide scrollbar utilities; you have to write custom CSS using ::-webkit-scrollbar pseudo-elements.

Bootstrap adds .modal-open to the body to prevent scrolling and manages focus trapping automatically for accessibility.

Use the data-bs-interval='false' attribute on the .carousel element.

By adding .invalid-tooltip instead of .invalid-feedback, you can show the error message in a styled bubble.

Bootstrap doesn't include icons by default. You can use Bootstrap Icons, Font Awesome, or Google Material Icons.

It uses Popper.js to calculate the best place to show the menu, avoiding it getting cut off by the viewport edges.

Change $grid-columns (e.g., to 16 or 24) in Sass and recompile.

These are containers that are 100% wide until the specified breakpoint, after which they behave like fixed-width containers.

Override the $grid-gutter-width variable in Sass.

Bootstrap 5.3 added utilities for text emphasis and subtle background colors (e.g., .text-primary-emphasis).

Use .link-underline-offset-1 to .link-underline-offset-3 to control the distance of the underline from the text.

Applied to elements with .focus-ring to change the glow color.

Start with simple semantic HTML and basic Bootstrap utilities, then add complex animations or JS features for browsers that support them.