Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Bootstrap 4 & Bootstrap 5 - A Complete course with projects

Stark learning best front-end framework Bootstrap 4 with real examples and projects from zero

Created byShehzad Arain

Last updated 11/2022

English

What you'll learn

Build responsive website/templates using bootstrap
You can how to design your templates professionally.

Course content

11 sections • 60 lectures • 8h 48m total length

Introduction2:38
Different Front-end frameworks5:18
Explore different front-end frameworks, including foundation and Metro UI, emphasizing responsive, mobile-first, semantic design. Learn installation steps and review documentation for buttons and UI elements.
Overview of the documentation of the Bootstrap website6:19
Explore the Bootstrap website documentation, navigate examples and components, learn about themes, license, downloads, and how to apply alerts, breadcrumbs, and responsive layouts in Bootstrap 4 and 5.
Introduction to IDE for bootstrap 43:24
Explore the recommended ide for bootstrap 4, learn how to download and set up essential web development tools, including laravel, composer, and related resources.

Introduction to components and utilities in bootstrap 46:55
Explore Bootstrap 4 components and utilities through hands-on navigation of the documentation, covering buttons, forms, input groups, Jumbotron, media, breadcrumbs, collapse, badges, and progress bars.
Buttons in bootstrap 48:57
Learn to implement and customize Bootstrap 4 buttons, including regular and outline styles, color variants like primary, secondary, success, and sizing options.
Alert in bootstrap 46:37
Explore how to implement Bootstrap 4 alert components with contextual classes such as primary, secondary, success, danger, warning, and info, and apply them in a web page.
Badges in bootstrap 44:20
Explore badges in bootstrap 4 and how alerts integrate with visual indicators, with practical, project-focused demonstrations.
Button groups in bootstrap 45:17
Build and customize button groups in bootstrap 4, including multi-button layouts and input groups. Use color and size variations like primary, success, large, and small to create versatile interfaces.
Cards in Bootstrap 48:03
Learn how to implement cards in Bootstrap 4, including images, headings, and body content, with layouts to create polished, reusable card components.
List group in bootstrap 43:05
Learn how to build a Bootstrap 4 list group, manage active and disabled states, and apply green color styling to list items.
Media Objects5:31
Learn how to implement and customize media objects in Bootstrap 4 and 5, including images, text, alignment options, and media containers to display comments and author information.
Progress bar in bootstrap 46:27
Explore how to implement a progress bar in Bootstrap 4 by setting minimum and maximum values, displaying percent completion, and using background and primary.
Spinners in bootstrap 44:55
Implement Bootstrap 4 spinners and style them with margins and padding to create clear loading indicators across projects.
The collapse in bootstrap 49:15
Explore how to create collapsible content in Bootstrap 4 using toggles, buttons, and anchors, configure data-target attributes, and build accordions with collapsible panels effectively.
Pagination in bootstrap 44:16
Discover how to paginate large data sets with Bootstrap 4, creating page navigation with first, last, active and disabled states, and options for size and center alignment.

Introduction to the grid system in bootstrap 45:48
Explore the Bootstrap grid system, a mobile-first layout tool, and learn how to define containers and 12-column grids to build responsive web layouts with Bootstrap 4.
Introduction to containers, rows, and columns in bootstrap 410:13
Master bootstrap's grid system by building responsive layouts with containers, rows, and columns, using breakpoints to adapt content from small phones to large desktops.
Columns rules in bootstrap 48:43
Master how bootstrap's 12-column grid defines responsive layouts by assigning column widths (e.g., six plus six) within a single row, and adjust with breakpoints like sm, md for different devices.
How to customize the Bootstrap 4 classes OR elements7:57
Learn to customize Bootstrap 4/5 elements by creating custom CSS, adjusting button backgrounds, and applying your own class to modify padding and styles.
Ordering the columns in bootstrap 4, break the column to a new line in14:14
Explore Bootstrap's grid system by defining and ordering responsive columns, using breakpoints to move columns to new lines, and applying order utilities to rearrange content across small to large screens.

Borders and border radius in bootstrap 47:44
Learn to apply Bootstrap 4 borders and border radius using utility classes, targeting specific sides, colors, and shapes for images and elements. Build flexible layouts with responsive border utilities.
Close icon, colors, and embed in bootstrap 410:15
Define background colors, text colors, and color utilities in Bootstrap 4, and learn to structure layouts with rows and columns, embed icons, and apply themes.
Use margin and padding in bootstrap 4, sizing in bootstrap 48:14
Master margin and padding in bootstrap 4 to control spacing, and apply absolute positioning with top, bottom, left, and right for precise layout.

211:10
Introduction to bootstrap 5 documentation15:04
Introduction to components in bootstrap 55:54
Introduction to alerts and badges in Bootstrap 515:00
Working with the breadcrumb in bootstrap 56:05
Buttons in bootstrap 510:10
Button groups in bootstrap 510:30
How to customize the element in bootstrap 57:17
Progress bar in bootstrap 510:26
The collapse in Bootstrap 55:22
Cards in Bootstrap 514:45
Pagination in Bootstrap 55:21
Create the close button in Bootstrap 53:53
Accordion in Bootstrap 59:08
List group in Bootstrap 510:05
Background, borders, and border-radius in Bootstrap 58:32
Colors and positions in Bootstrap 57:48
Sizing, spacing, and text in Bootstrap 511:49
Float and visibility in Bootstrap 54:10
Container in Bootstrap 55:46
Grid System in Bootstrap 516:04
Column netting, column offset in Bootstrap 59:31
From control in Bootstrap 55:27
Select Bootstrap 53:53
Checkbox and radio buttons in Bootstrap 56:38
Input groups and ranges in Bootstrap 56:44
Navbar in Bootstrap 59:56

Requirements

HTML
CSS
Javascirpt and jQuery

Description

Bootstrap 4 courses/series/tutorials for learners as well as professionals

A Website is a vital component of any sector; we can access our framework/program everywhere and on every device.

How can you automatically compose code for each screen/device? This is the crucial problem a beginner can raise. Bootstrap 4 helps you to create web pages/websites using a single line of javascript for each platform. Bootstrap has just released the bootstrap 4.6 updates.

Previously, bootstrap published the following update.

Bootstrap 4
Bootstrap 3
Bootstrap 2
Boostrap 1

We will start from zero in this Bootstrap 4 course; don't worry about previous models (if you are unfamiliar with the old version).

We start at the start: what's bootstrap 4? And what are the structures exactly? Who should take advantage of the built-in bootstrap classes for their web pages?

The various components of the bootstrap 4families will be covered and used; we will divide them into bootstrap 4 javascript bits, such as modal tooltips and sliders, after learning the basics of the components.

Bootstrap is a well-known front-end website design tool. We will address the grid system in bootstrap 4 and bootstrap 4 bins, rows, and columns.

If you are familiar with the grid architecture, we will start by designing the main web page using the grid structure to understand the fundamentals of bootstrap 4 quickly.

Bootstrap 5, they have introduced several various classes and modules; we will go through them step by step since it is the simple bootstrap 4 for projects.

We also cover real-time/life activities to understand how to function. This course will include two to three activities.

The tools/IDEs used in this series are presented so that you can appreciate the entire method in only one month (shakzee).

Bootstrap 4 and bootstrap 3 courses are already available, so we have the same course for bootstrap 4 and bootstrap 3 in Hindi/Urdu.

This is the whole of the Bootstrap 4 series, full of undertakings.

Who this course is for:

Anyone who wants to create responsive templates using the Worlds powerful framework
Anyone who wants to learn bootstrap 4
Anyone who wants to learn how to create responsive templates professionally

Bootstrap 4 & Bootstrap 5 - A Complete course with projects

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 18min

Download and installing the Bootstrap 41 lecture • 16min

Components in Bootstrap 412 lectures • 1hr 14min

Grid System in bootstrap 45 lectures • 47min

Utilities in Bootstrap 43 lectures • 26min

NavBars2 lectures • 18min

Templates1 lecture • 8min

Projects2 lectures • 43min

Conclusion1 lecture • 4min

Bootstrap 527 lectures • 3hr 56min

Requirements

Description

Who this course is for: