Master class Bootstrap 5 Course - Responsive Web Design
- Description
- Curriculum
- FAQ
- Reviews
Learn about everything there is to know about Master class Bootstrap 5 Course – Responsive Web Design. A step by step process is used to explain every facet of these topics.
NOTE: This course includes information on web programming, design, OOP, JavaScript!
Gain a good understanding of the following concepts with this course:
-
What Bootstrap 5 is?
-
Web Certifications
-
How to develop websites using Bootstrap & a responsive design philosophy
-
Features of the Bootstrap language
-
Coding semantics
-
Application programming
-
Website programming
Bootstrap is the most popular responsive framework in the world. It is requested by all companies such as Google, Facebook and Microsoft for development. This course will ensure you are not left out as more and more companies request this awesome and powerful language. This course will teach you everything about programming Bootstrap websites.
You will receive all the knowledge to use and leverage the powerful technology behind these amazing and wonderful platforms.
Over 675,000 students have enrolled on my courses and all of them are extremely satisfied. You will also be satisfied with this course. If you do not like the course, remember that within 30 days you can request a full refund. I guarantee you satisfaction.
If you have any questions regarding the topics covered in this course, please feel free to ask. I’m always happy to help those who want to learn.
To summarise this is what you get:
• Lifetime access to HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.
• All videos are downloadable. Learn wherever you want, even without an internet connection!
• Downloadable starter code and final code for each section.
• Free helpful support in the course Q&A when you have questions or get stuck.
• Multiple coding challenges to practice your new skills (solutions included).
Sounds great? Then start this adventure today by clicking the “Take this course” button, and join me in the only Bootstrap Programming course that you will need!
-
1Introduction To This CourseVideo lesson
Introduction to this course
-
2Changes From Bootstrap 4 and Bootstrap 5Video lesson
Bootstrap, the most popular front-end framework built to design modern, responsive, and dynamic interfaces for professional design web pages, is currently undertaking a major update, Bootstrap 5.
Learn what's new in Bootstrap 5 and why you should upgrade from Bootstrap 4.
-
3Bootstrap 5 Browser CompatibilityVideo lesson
Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.
-
4Setup Bootstrap 5Video lesson
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
-
5Grid System IntroductionVideo lesson
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.
-
6All Grid SizesVideo lesson
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.
-
7Single Column WidthVideo lesson
Learn about single column widths and how they can greatly improve your website.
-
8Variable Width ContentVideo lesson
Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.
-
9Offsetting ColumnsVideo lesson
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.
-
10Reordering ColumnsVideo lesson
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
-
11Column BreaksVideo lesson
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.
-
12Column WrappingVideo lesson
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.
-
13Vertical AlignmentVideo lesson
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).
-
14Horizontal AlignmentVideo lesson
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.
-
15Margin UtilitiesVideo lesson
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).
-
16Multiple RowsVideo lesson
Learn about adding multiple rows on your website.
-
17Nesting Rows and ColumnsVideo lesson
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).
-
18GuttersVideo lesson
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
-
19Responsive ContainersVideo lesson
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.
-
20Fluid ContainersVideo lesson
Use .container-fluid for a full width container, spanning the entire width of the viewport.
-
21Quiz - Grid System & LayoutQuiz
Time to test your knowledge on the grid and layout systems in Bootstrap
-
22AlertsVideo lesson
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-
23BadgeVideo lesson
Documentation and examples for badges, our small count and labeling component.
-
24BreadcrumbVideo lesson
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
-
25ButtonsVideo lesson
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
-
26Button groupVideo lesson
Group a series of buttons together on a single line with the button group.
-
27CardVideo lesson
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
-
28Card Masonry LayoutVideo lesson
Integrate Masonry with the Bootstrap grid system and cards component.
-
29CarouselVideo lesson
A slideshow component for cycling through elements—images or slides of text—like a carousel.
-
30Close buttonVideo lesson
A generic close button for dismissing content like modals and alerts.
-
31CollapseVideo lesson
Toggle the visibility of content across your project with a few classes.
-
32Collapse Accordion StyleVideo lesson
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.
-
33DropdownsVideo lesson
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
-
34List groupVideo lesson
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.
-
35ModalVideo lesson
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
-
36NavsVideo lesson
Documentation and examples for how to use Bootstrap’s included navigation components.
-
37NavbarVideo lesson
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.
-
38PaginationVideo lesson
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
-
39PopoversVideo lesson
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
-
40ProgressVideo lesson
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
-
41ScrollspyVideo lesson
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
-
42SpinnersVideo lesson
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
-
43ToastsVideo lesson
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
-
44TooltipsVideo lesson
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
-
45Quiz - ComponentsQuiz
Time to test your knowledge on the components in Bootstrap
-
46Form controlVideo lesson
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
-
47SelectVideo lesson
Customize the native <select>s with custom CSS that changes the element’s initial appearance.
-
48ChecksVideo lesson
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
-
49FileVideo lesson
Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.
-
50RangeVideo lesson
Use our custom range inputs for consistent cross-browser styling and built-in customisation.
-
51Input groupVideo lesson
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
-
52LayoutVideo lesson
Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
-
53ValidationVideo lesson
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviours or custom styles and JavaScript.
-
54Quiz - FormsQuiz
Time to test your knowledge on the forms in Bootstrap
-
55ClearfixVideo lesson
Quickly and easily clear floated content within a container by adding a clearfix utility.
-
56Colored linksVideo lesson
Colored links with hover states
-
57EmbedVideo lesson
Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
-
58PositionVideo lesson
Use these helpers for quickly configuring the position of an element.
-
59Screen readersVideo lesson
Use screen reader utilities to hide elements on all devices except screen readers.
-
60Stretched linkVideo lesson
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
-
61Text truncationVideo lesson
Truncate long strings of text with an ellipsis.
-
62Quiz - HelpersQuiz
Time to test your knowledge on helpers in Bootstrap 5
-
63BordersVideo lesson
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
-
64ColorsVideo lesson
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
-
65Display PropertyVideo lesson
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.
-
66FlexVideo lesson
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.
-
67FloatVideo lesson
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
-
68InteractionsVideo lesson
Utility classes that change how users interact with contents of a website.
-
69OverflowVideo lesson
Use these shorthand utilities for quickly configuring how content overflows an element.
-
70PositionVideo lesson
Use these shorthand utilities for quickly configuring the position of an element.
-
71ShadowsVideo lesson
Add or remove shadows to elements with box-shadow utilities.
-
72SizingVideo lesson
Easily make an element as wide or as tall with our width and height utilities.
-
73SpacingVideo lesson
Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.
-
74TextVideo lesson
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
-
75Vertical alignVideo lesson
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
-
76VisibilityVideo lesson
Control the visibility of elements, without modifying their display, with visibility utilities.
-
77Quiz - UtilitiesQuiz
Time to test your utilities skillset

External Links May Contain Affiliate Links read more