Master class Bootstrap 5 Course - Responsive Web Design

Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

• Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.

• Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use min-width in our media queries.

• Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

Learn about single column widths and how they can greatly improve your website.

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.

Use the margin and padding spacing utilities to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a 1rem value default $spacer variable. Choose values for all viewports (e.g., .mr-3 for margin-right: 1rem), or pick responsive variants to target specific viewports (e.g., .mr-md-3 for margin-right: 1rem starting at the md breakpoint).

Learn about adding multiple rows on your website.

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Documentation and examples for badges, our small count and labeling component.

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Group a series of buttons together on a single line with the button group.

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Integrate Masonry with the Bootstrap grid system and cards component.

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

A generic close button for dismissing content like modals and alerts.

Toggle the visibility of content across your project with a few classes.

Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

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.

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Documentation and examples for how to use Bootstrap’s included navigation components.

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.

Use our custom range inputs for consistent cross-browser styling and built-in customisation.

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviours or custom styles and JavaScript.

Quickly and easily clear floated content within a container by adding a clearfix utility.

Colored links with hover states

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

Use these helpers for quickly configuring the position of an element.

Use screen reader utilities to hide elements on all devices except screen readers.

Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.

Truncate long strings of text with an ellipsis.

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Utility classes that change how users interact with contents of a website.

Use these shorthand utilities for quickly configuring how content overflows an element.

Use these shorthand utilities for quickly configuring the position of an element.

Add or remove shadows to elements with box-shadow utilities.

Easily make an element as wide or as tall with our width and height utilities.

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Control the visibility of elements, without modifying their display, with visibility utilities.

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

Documentation and examples for displaying related images and text with the figure component in Bootstrap.