Master Bootstrap 4 (4.3.1) and code 7 projects with 25 pages
4.3 (233 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,404 students enrolled

Master Bootstrap 4 (4.3.1) and code 7 projects with 25 pages

Master the latest version of Bootstrap 4 and create real projects and themes while learning HTML, web design and coding
4.3 (233 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,404 students enrolled
Last updated 3/2019
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 22.5 hours on-demand video
  • 1 article
  • 27 downloadable resources
  • 70 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn how to create and use all components and utilities of the Bootstrap 4 framework
  • Learn how to create seven different responsive websites using the Bootstrap 4 framework
  • Practice with 5 quizzes, 70 coding exercises and a special built Bootstrap 4 Learning Kit (100+ source files)
  • Master the latest version: Bootstrap 4.3.1 (from February 2019)
  • How to create fluid and responsive layouts
  • How to use breakpoints and the grid system
  • How to structure all kinds of content
  • How to build all of the 24 components
  • How to use all of the 19 utilities
  • How to build 14 different web page templates
  • Project 1: Create a landing page
  • Project 2: Create an online forum
  • Project 3: Create a blog
  • Project 4: Create a knowledge base
  • Project 5: Create a resume and CV page
  • Project 6: Create a small business website
  • Project 7: Create a survey
  • How to customize the default styling
  • Advanced Bootstrap 4: How to use JavaScript triggers, options, methods and events
  • How to use Google Fonts
  • How to add icons with Font Awesome 4
  • How to add icons with Font Awesome 5
  • Accessibility best practices
Course content
Expand all 208 lectures 22:33:37
+ Introduction to Bootstrap
9 lectures 25:22

A short introduction to the course where I'll briefly answer the following questions:

  • What does the course contain?
  • Who is the target audience?
  • What will you learn?
  • What is the teaching style and what are the learning materials?
  • What are the requirements?
Preview 02:22

Get an overview of all the projects you will learn to create in this course. You can also follow the links to experience live demos of all the projects.

Preview 00:40

An overview of what Bootstrap is and what parts it consists of.

Preview 01:56

A brief history of Bootstrap and how it has evolved since the first version released in 2011 and until now.

The history of Bootstrap
01:02

Learn about the official browser and device support and how to find information about the known bugs that exist.

Browser and device support
00:47

If you have already used Bootstrap 3 for a website and want to update it to version 4, you should know about the major changes that have been made.

Migration to Bootstrap 4
02:08

An explanation of the basic starter template, which you can download and use in your own projects.

Starter template
03:48

Learn how to download and install Bootstrap 4 to get you up and running and ready to code.

Downloading and installing Bootstrap
07:29

I this lecture I will present the Bootstrap 4 Learning Kit, which is used throughout most of the lectures. You can use this as a reference and as a way to practice writing your own Bootstrap classes.

Preview 05:10

Essential questions about Bootstrap 4

About Bootstrap 4
4 questions
+ Layout
3 lectures 24:18

In this section we'll learn how to create fluid and responsive layouts with the use of breakpoints, Bootstrap's powerful grid system and more.

Preview 00:49

In this lecture we'll learn how to create containers. Containers are used to limit the width of content and center it in the viewport.

Containers
02:29
Create a container
1 question
Create a fluid container
1 question

In this lecture we'll learn how to use the grid system and breakpoints to make responsive and fluid layouts.

Preview 21:00
About layout
3 questions
+ Content
7 lectures 38:30

In this section we'll learn how to structure all kinds of content, including typography, images, figures, tables and code blocks.

Preview 01:02

In this lecture we'll learn about the Reboot stylesheet, that gives us a consistent and simple baseline to build upon.

Reboot
01:25

In this lecture we'll learn how to use typograhy. We can use some basic styling for headings, paragraphs, blockquotes, lists and more.

Preview 11:25
Normal headings
1 question
Additional headings
1 question
Inline text elements
1 question
Blockquotes
1 question
Lists
1 question

In this lecture we'll learn how to use images. We can make them responsive, apply some styling and align them.

Images
03:33
Images
1 question

In this lecture we'll learn how to use figures. Figures are used when you need to display an image with a related caption.

Figures
02:52
Figures
1 question

In this lecture we'll learn how to use tables. The different styles for this kind of content includes inverted colors, table head styles, striped rows, bordered table, hoverable rows, small table, contextual color classes and responsive table.

Tables
13:06
Tables
1 question

In this lecture we'll learn how to use code. Code can be formatted as either inline code snippets or multiline blocks of code, and specific tags are used for different kinds of code. Large blocks of code can have a max-height and vertical scroll.

Code
05:07
Inline code
1 question
Code blocks
1 question
About content
4 questions
+ Components
27 lectures 04:35:05

In this section we'll learn how to build all of the 24 components, including buttons, cards, carousels, dropdowns, forms, modals and navigation.

Preview 00:37

In this lecture we'll learn about the alert component. Alerts provide contextural feedback messages for typical user actions.

Preview 07:40
Alert
1 question
Alert with matching link
1 question
Alert with additional content
1 question
Dismissible alert
1 question

In this lecture we'll learn about the badge component. Badges are small and adaptive tags for adding context to different kinds of content.

Badges
05:26
Default badge
1 question
Pill badge
1 question

In this lecture we'll learn about the breadcrumb component. A breadcrumb component is used to indicate the current page's location in a navigational hierarchy.

Breadcrumbs
03:40
Breadcrumb out of nav element
1 question
Breadcrumb out of ordered list
1 question

In this lecture we'll learn about the button component. Buttons are used for actions in forms, dialogs and more. They are available in different variations, in different sizes, with different states, and as either checkboxes or radio buttons.

Buttons
13:19
Buttons
1 question

In this lecture we'll learn about the button group component. Button groups are used to group together a series of buttons on a single line, for example to create a toolbar.

Button group
04:24
Standard button group
1 question
Toolbar with button groups
1 question
Button group variations
1 question

In this lecture we'll learn about the card component. The card component is a flexible content container that includes options for title, subtitle, header, footer, image and various content as well as contextual background colors and various layouts.

Card
17:44

In this lecture we'll learn about the carousel component. The carousel component is used as a slideshow for various kind of content, and it comes with controls, indicators and captions and different options for behavior.

Carousel
13:42

In this lecture we'll learn about the collapse component. The collapse component is used to toggle content on the page.

Collapse
09:16

In this lecture we'll learn about the dropdown component. Dropdowns are contextual overlays that can be toggled to show a list of links.

Preview 12:54

In this lecture we'll learn about all the different form controls including custom controls found in Bootstrap.

Forms – Controls
34:50

In this lecture we'll learn about how to layout forms in Bootstrap. This can be done using the grid system, but it's also possible to create inline forms and horizontal forms.

Forms – Layout
08:02

In this lecture we'll learn about the different validation methods provided by Bootstrap. You can choose between the native browser validation and the custom Bootstrap validation. The custom Bootstrap validation can be applied client-side and server-side and can have help text as regular text and as tooltips.

Forms – Validation
11:54

In this lecture we'll learn about input groups. With input groups we can add text, checkboxes, radio buttons, buttons, button groups and dropdowns on either side of text input elements.

Input group
10:07

In this lecture we'll learn about the jumbotron component. The jumbotron is a flexible component that you can use to show for example key marketing messages on your page.

Jumbotron
03:21
Jumbotron
1 question

In this lecture we'll learn about the list group component. This is a flexible component for displaying a series of content as a list.

List group
15:13
Standard list group
1 question
List group variations
1 question

In this lecture we'll learn how to create media objects. The media object is a flexible component for building repetitive patterns where media is positioned alongside content.

Media object
06:18

In this lecture we'll learn about the modal component. Modals are flexible dialog prompts, and they come with different options for functionality and styling.

Modal
13:12

In this lecture we'll learn about the nav component. Navs can be styled with tabs and pills and they can have dropdown and pane functionality.

Navs
12:10

In this lecture we'll learn about the navbar component. The navbar component functions as a wrapper that positions branding, navigation and other elements in a responsive header.

Navbar
14:48

In this lecture we'll learn about the pagination component. Pagination links indicate that a series of related content exists across multiple pages. This is useful for long lists of content like search results.

Pagination
10:37
Standard pagination
1 question
Pagination variations
1 question

In this lecture we'll learn about the popover component. With popovers we can add small overlay content to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.

Popovers
11:32
Standard popover
1 question
Popover variations
1 question

In this lecture we'll learn about the progress component. The progress component can be used to display simple and complex progress bars that can be stacked with options for adding labels, stripes and animated stripes.

Preview 06:20
Progress
1 question

In this lecture we'll learn about the scrollspy component. The scrollspy component is used to automatically update navigation targets based on scroll position.

Scrollspy
05:32
Scrollspy
1 question

In this lecture we'll learn about the spinner component. The spinner component is used to indicate the loading state of a component or page.

Spinners
07:43

In this lecture we'll learn about the toast component. The toast component is used to push notifications to your visitors.

Toasts
07:34

In this lecture we'll learn about the tooltip component. You can easily add tooltips to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.

Tooltips
07:10
Standard tooltip
1 question
Tooltip variations
1 question
About components
10 questions
+ Utilities
20 lectures 01:50:15

In this section we'll learn how to use all of the 19 utilities, including easy ways to change color, sizing, spacing and typography.

Preview 00:34

In this lecture we'll learn about the border utilities. With border utilities you can quickly style the border and border-radius of an element. You can for example remove borders and provide different kinds of border-radius for images.

Preview 08:20
Borders
1 question
Border-radius
1 question

In this lecture we'll learn about the clearfix utility. With this utility you can easily clear floats by adding a class to the parent element.

Clearfix
02:04
Clearfix
1 question

In this lecture we'll learn about the close icon. With Bootstrap you can easily create a generic close icon for dismissing content like modals and alerts.

Close icon
01:33
Close icon
1 question

In this lecture we'll learn about the color utilities. Bootstrap provides contextual colors classes for text color, link color and background color.

Preview 06:06
Text color
1 question
Link color
1 question
Background color
1 question

In this lecture we'll learn about the display utility. You can easily change an element's display property with a simple use of some classes. Responsive classes are supported.

Display
08:12
Display
1 question

In this lecture we'll learn about the embed utilities. With these utilities you can preserve the intrinsic aspect ratio for embedded elements: iframes, embeds, videos and objects.

Embed
04:10
Embed basic structure
1 question
Embed with aspect ratio
1 question

In this lecture we'll learn about the flex utilities. With these you can quickly manage the layout, alignment and sizing of grid columns, navigation, components and more.

Flex
22:47
Flexbox container
1 question
Flex direction
1 question
Justify content
1 question
Align items
1 question
Align self
1 question
Flex wrap
1 question
Order
1 question
Align content
1 question
Responsive utility classes
1 question

In this lecture we'll learn about the float utility. With this utility you can control the floating of elements responsively.

Float
04:00
Float utilities
1 question

In this lecture we'll learn about the image replacement utility. We can use the image replacement utility to help replace an element's text content with a background image.

Image replacement
02:12
Image replacement
1 question

In this lecture we'll learn about the overflow utility. Use this utility to control how content overflows an element.

Overflow
02:25

In this lecture we'll learn about the position utility. The position utility is helpful for placing elements outside the normal document flow as either fixed or sticky positioned.

Position
03:52
Position
1 question

In this lecture we'll learn about the screen reader utility. With this utility you can hide an element in all devices except for screen readers. You can also control if it should show again when gaining focus for example by navigating with a keyboard.

Screen readers
01:49
Screen readers
1 question
Screen readers (and focusable)
1 question

In this lecture we'll learn about the shadows utility. With this utility you can easily remove box shadows or add three sizes of shadows: small, regular and large.

Shadows
01:44

In this lecture we'll learn about the sizing utilities. With sizing utilities you can control the width and height of elements very easily.

Sizing
03:28
Sizing: width
1 question
Sizing: height
1 question

In this lecture we'll learn about the spacing utilities. With spacing utilities you can control the margin and padding of one or more sides of elements across different device sizes.

Spacing
15:34
Spacing
1 question

In this lecture we'll learn about the stretched link utility. Use this to make any HTML element or Bootstrap component clickable by "stretching" a nested link.

Stretched link
03:49

In this lecture we'll learn about the text utilities. With text utilities you can for example align the text, transform the characters and change the font weight and style.

Preview 11:01
Justified text
1 question
Text with no wrap
1 question
Text alignment for all breakpoints
1 question
Text alignment for specific breakpoints and up
1 question
Text transform
1 question
Font weight and style
1 question

In this lecture we'll learn about the vertical align utilities. With vertical align utilities you can change the alignment of inline elements, including inline-block, inline-table and table cell elements.

Vertical align
04:33
Vertical align
1 question

In this lecture we'll learn about the visibility utility. With this utility you can toggle only the visibility of an element, so the display property isn't modified. In this way the element can still affect the flow of the document.

Visibility
02:02
Visibility
1 question
About utilities
5 questions
+ Templates
15 lectures 02:13:51

In this section we'll learn how to build some common web templates that can be used in real websites. We'll use different layout styles and content and use a mix of the different components and utilities.

Preview 00:23

In this lecture we'll learn how to build a photo gallery template. We'll be using a heading, a lead paragraph, pagination components and figures.

Preview 10:19

In this lecture we'll learn how to build a video gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

Video gallery
09:27

In this lecture we'll learn how to build a mixed gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

Mixed gallery
11:50

In this lecture we'll learn how to build an audio gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

Audio gallery
09:03

In this lecture we'll learn how to build a login template. We'll be using a heading element, a full-width jumbotron component with fixed-width content, various form elements and buttons.

Login
07:12

In this lecture we'll learn how to build a contact template. We'll be using various typography elements, form elements, buttons and a responsive embed of Google Maps.

Contact
15:20

In this lecture we'll learn how to build a footer template. We'll be using unordered lists, the dropdown component and various typography elements for headings, address and abbreviations.

Footer
10:44

In this lecture we'll learn how to build a sitemap template. We'll be using heading elements and nested, unordered lists.

Sitemap
07:55

In this lecture we'll learn how to build a shortcuts template. We'll be using the modal component and HTML tags for code content.

Shortcuts
09:14

In this lecture we'll learn how to build an FAQ template. Frequently Asked Questions. We'll be using a heading and an accordion with card components build with the collapse component.

FAQ
06:45

In this lecture we'll learn how to build a thank you template. We'll be using a full-width jumbotron component with fixed-width content.

Thank you
03:29

In this lecture we'll learn how to build an employees template. We'll be using heading elements, images and inline lists.

Employees
06:46

In this lecture we'll learn how to build a pricing table template. We'll be using card components with card headers, card blocks, card text, list groups and card footers as well as contextual color classes.

Pricing table
08:34

In this lecture we'll learn how to build a create account template. We'll be using a full-width jumbotron component with fixed-width content, a lead paragraph, various form elements, buttons and an alert.

Create account
16:50
+ Advanced Bootstrap
6 lectures 42:07

In this section you will learn about the more advanced parts of Bootstrap 4. First of all you will learn how to customize the default styling using your own colors, sized and more. Then you will learn to add web fonts and icon fonts to your page. Finally, you will learn about JavaScript triggers, options, methods and events, which are used when you want to work with the interactive Bootstrap components.

Preview 01:05

In this lecture we'll learn how to customize the default Bootstrap 4 styling with SASS. We'll see examples of how to change colors, spacing, breakpoints, border-radius and padding.

Customizing the default styling
11:41

In this lecture we'll learn how to use Google Fonts on our Bootstrap pages. This is a free and quick way to get access to over 800 web fonts hosted by Google.

Using Google Fonts
03:36

In this lecture we'll learn how to add icons to our Bootstrap pages with Font Awesome 4. This is a free and quick way to get access to 675 icons.

Adding icons with Font Awesome 4
10:10

Download and install the latest version of Font Awesome: Font Awesome 5.1.

Downloading and installing Font Awesome v5.1.0
04:49

In this lecture we'll learn about JavaScript triggers, options, methods and events used by some of the components in Bootstrap 4. We'll see an example of how to use triggers and options for a popover component and how to use methods and events for a carousel component.

JavaScript triggers, options, methods and events
10:46
+ Project 1: Create a landing page
17 lectures 01:59:34

An overview of what you'll learn in this project.

Preview 02:26

In this lecture we'll create our navigation menu that consists of a fixed navbar with scrollspy functionality.

Components: Navigation
05:36

In this lecture we'll create our jumbotron section that consists of a jumbotron component with a heading, some paragraphs and buttons.

Components: Jumbotron
03:05

In this lecture we'll create our description section that consists of a heading and two paragraphs.

Components: Description
01:37

In this lecture we'll create our trailer section that consists of a heading, a paragraph and a responsively embedded YouTube video.

Components: Trailer
01:53

In this lecture we'll create our showcase section that consists of a heading, a paragraph and a carousel with four slides.

Components: Showcase
08:08

In this lecture we'll create our features section that consists of four blocks with a heading, a paragraph and a button.

Components: Features
02:36

In this lecture we'll create our pricing section that consists of a heading and three cards with card header, card text, list group and card footer.

Components: Pricing
04:59

In this lecture we'll create our reviews section that consists of four blockquotes with a paragraph and a blockquote footer.

Components: Reviews
03:56

In this lecture we'll create our newsletter section that consists of a heading, some form elements and a modal.

Components: Newsletter
10:54

In this lecture we'll create our footer section that consists of various links (including social links), address, inline list and a dropdown.

Components: Footer
10:56

In this lecture we'll add grid classes to turn our layout into a responsive grid.

Adjustments: Responsive adjustments
16:25

In this lecture we'll use different utilities to adjust the layout of our page, including utilities for spacing, color, flex and screenreaders.

Adjustments: Adjustments with utilities
17:24

In this lecture we'll add some custom CSS to create a full-size background image with a simple parallax effect.

Customization: Styling with CSS
05:11

In this lecture we'll use the Font Awesome icon font to add icons to our page.

Customization: Adding icons with Font Awesome 4
14:38

In this lecture we'll use Google Fonts for our headings and body text.

Customization: Using Google Fonts
04:34

In this lecture we'll add a smooth scroll JavaScript plugin to create a scrolling animation when navigating the page.

Customization: Adding smooth scroll
05:16
+ Project 2: Create an online forum
13 lectures 01:38:13

An overview of what you'll learn in this project.

Preview 05:19

In this lecture we'll create our navbar – with an inline search form – and a breadcrumb.

Navbar and breadcrumb
03:14

In this lecture we'll create our board overview, which consists of a number of tables with responsive behavior.

Board overview
07:16

In this lecture we'll create our section for member info and statistics. These are build with the card component with various content inside.

Members and statistics
05:49

In this lecture we'll create our footer section.

Footer
01:58

In this lecture we'll add grid classes to turn our layout into a responsive grid.

Responsive adjustments
08:45

In this lecture we'll use different utilities to adjust the layout of our page, including utilities for spacing, color, flex and screenreaders.

Adjustment with utilities
08:12

In this lecture we'll create another page for our project with an overview of a forum category.

Forum category overview
03:09

In this lecture we'll create another page for our project with an overview of a topics in a forum.

Topics overview
11:47

In this lecture we'll create a combined filter and sorting widget for our topics overview as well as a pagination component.

Filter/sorting widget and pagination
13:36

In this lecture we'll create another page for our project showing a specific post.

Post
20:12

In this lecture we'll create another page for our project with a form to create a new topic.

New topic
06:44

In this lecture we'll take a look at our finished project.

Finished project
02:12
+ Project 3: Create a blog
20 lectures 02:17:45

An overview of what you'll learn in this project.

Preview 03:19

In this lecture we'll create our navbar with dropdowns and inline search form.

Navigation
12:13

In this lecture we'll create our header of the blog post with badges and links.

Header
04:58

In this lecture we'll create the content of our post featuring a figure element with a figure caption and various kinds of text content: a lead paragraph, regular paragraphs and a blockquote with a blockquote footer.

Post
04:42

In this lecture we'll create our comments section with media objects, nested media objects and a form to add a comment.

Comments
10:21

In this lecture we'll create our author section with a card component that has an image, an inline list, a heading and some text.

Author
03:46

In this lecture we'll create our related posts section with the list group component with various content inside each list group item.

Related posts
04:48

In this lecture we'll create our categories section with the list group component with various contextual background color classes.

Categories
02:30

In this lecture we'll create our tag cloud section with the card component and several badge components.

Tag cloud
02:24

In this lecture we'll create our about the blog section with the card component and some text.

About the blog
01:53

In this lecture we'll create our newsletter section with the card component and a simple signup form with an input group.

Newsletter
03:54

In this lecture we'll create our footer section with unstyled unordered lists, an address with abbreviations and an inline list.

Footer
07:29

In this lecture we'll add grid classes to turn our layout into a responsive grid.

Responsive adjustments
10:07

In this lecture we'll use different utilities to adjust the layout of our page, including utilities for spacing and color.

Adjustment with utilities
13:11

In this lecture we'll use the Font Awesome icon font to add icons to our page.

Adding icons with Font Awesome 4
09:11

In this lecture we'll adjust the page for a text blog post to a photo gallery blog post.

Post - Photo gallery
08:08

In this lecture we'll adjust the page for a photo gallery blog post to a video blog post.

Post - Video
05:51

In this lecture we'll adjust the page for a video blog post to an audio blog post.

Post - Audio
02:36

In this lecture we'll create an overview of blog posts in a list format.

Blog overview – List
19:12

In this lecture we'll create an overview of blog posts in a grid format.

Blog overview - Grid
07:12
Requirements
  • Basic understanding of HTML
  • A code editor and a browser
Description

ABOUT

Bootstrap - the world's most popular front-end frameworks!

This course covers all the different parts of the latest version of the world's most popular front-end framework, Bootstrap 4.3.1. Bootstrap has been used by thousands of people around the world and have been carefully developed to cover a wide range of typical user interfaces.

Web pages built with Bootstrap 4 works across all kinds of devices, browsers and screen sizes while also taking care of accessibility and a clean and modern design.

This course is for the beginner who want to learn Bootstrap 4 from the bottom up. It goes through all the different parts, but each lecture can be watched independently.

In addition to just learning about the different parts of Bootstrap 4 you will find a detailed walk-through of how to build different responsive, modern and common web page templates, including a photo gallery, video gallery, mixed gallery, audio gallery, login, contact, footer, sitemap, shortcuts, FAQ, thank you, employees, pricing table and create account.

Finally, I will walk you through how to create 7 complete projects using Bootstrap 4.

PROJECTS

Learn to build the following projects using Bootstrap 4:

  • Project 1: Landing Page

  • Project 2: Online Forum

  • Project 3: Blog

  • Project 4: Knowledge Base

  • Project 5: Resume and CV Page

  • Project 6: Small Business Website

  • Project 7: Survey

LEARNING STYLE

More than just video lectures

In addition to the video lectures this course contains the following kinds of learning materials:

  • 70 coding exercises:
    A total of 291 automatic tests against your code. This is one of the best ways to learn how to code - no downloads or installations required.

  • 5 quizzes:
    In the end of every section you will find a quiz to test your new knowledge.

  • Bootstrap 4 Learning Kit:
    Downloadable ZIP file that works offline
    A custom built learning kit with source code for all parts of Bootstrap 4. Features a reference section with many examples and a practice section, which you can use while learning about Bootstrap 4. More than 100 source files included in this learning kit.

WHY THIS COURSE?

Why this course instead of other Bootstrap courses?

Wondering why you should choose this course instead of other Bootstrap courses? This course has the following features that makes it stand out among the rest:

  • up to date with the latest version of Bootstrap 4 from February 13, 2019: version 4.3.1

  • more features and extra learning materials including coding exercises, interactive CodePens and a custom Learning Kit

  • most lectures can be watched independently of each other

  • has been carefully crafted through more than 300 hours of dedicated work

UPDATES

Upcoming future updates for this course will include the following features and lectures:

  • New projects will be added: online shop, social network, portfolio, CMS admin, dashboard and more...

  • "Assignments": practice your knowledge by doing assignments as part of the course

  • New components, utilities and other features in future versions of Bootstrap will be added

TESTIMONIALS

Don't take my word for it – read what other students are saying:

Amazing detailed lessons
– Joseph Alba

This course is the best of all the bootstrap courses I have taken on Udemy. The presenter's language is clear and to the point, with only a very slight accent which does not affect intelligibility. Structurally the course material stands heads and shoulders above the others, with not only a comprehensive coverage of the bootstrap framework which the author maintains up to date, but also some very pertinent real world projects which can be used as starting points for most commercial projects which one might want to launch into after taking the course. Additionally, the presenter is very responsive when reached out to and his answers always cover questions comprehensively. As far as I am concerned, this course sets the standard by which all educational courses in this format should be measured.
Philippe Damerval

Very detailed and useful! It is right for me! I am very satisfied with all the content on this course. The instructor has been very clear in his explanations. Thank you Mr. Jeppe for your time and patience!
– Julio Bell Soublet

Excellent, I've been loving it since the beginning !!!
– Douglas Matos da Silva

Bootstrap 4 - the complete guide
– André Brandão

Detailed explanations about different Bootstrap features. Many Live example demos. The Learning Kit alone makes the purchase of this course all worth it. Thank you Jeppe.
– Dany Michaud

Great introduction to the building blocks of Bootstrap. Material is taught in a comprehensive manner. Not only has this been a great tool for learning bootstrap, but i will also be able to use this coursework as a reference for projects moving forward. The instructor (Jeppe) is quick with feedback and the coursework is taught is a logical, effective manner.
– Eric Dusel

Great in depth Tutorial I really enjoyed and upgraded knowledge.
– Shyam

The Awesome Bootstrap 4 Bible :)
– Ankruz

The course is very thorough. The lecturer is a master of the subject matter. I like the application he provided which serves both as a lab and a reference application.
– Glyn Davies

Very thorough going through everything so far. I like the Learning Kit which you get to use and follow along with in CodePen.
– Jim O'Brien

Fantastic course with concrete quiz which makes it easier to master the content included.
– AndySun

I took alot of courses on Udemy, this is the first time i feel that i must leave such a rating because simply it deserves more than that .. the instructor answered all my questions faster than i even imagined and was more than clear and helpful, beside it is very explanatory for a beginner like me (other course i took claimed that no prior knowledge is required but i discovered later that i was in a total mess because i don’t have prior knowledge in bootstrap to an extent that i left the whole course).The usage of pencode was an excellent idea because it shows for beginners (Like me) the effect of each class alone before applying the next class. The course is rich with alot of learning hours that concentrates on the pure bootstrap classes before engaging in projects (I hope all courses do this, i dunno why all courses today just dig into projects without deeply explaining the core of the skill), All the previous made me dig into the course faster than i imagined .i hope the instructor can make more courses ( I would highly appreciate a course of modern Html5 that contains deep explanation for Aria and modern accesibility attributes).
– Karim Usama

Very fluent and easy to follow.
– Kevin Rambo

Its really a great course, helped me in understanding many new features related to BS4, Lectures are very clear and to the point.Also Jeppe is prompt in responses, Wish to see more content around this subject. Thanks Jeppe.
– Ravi Challa

This course is the best HTML, CSS, bootstrap course there is in 2018.
– Alice Rose

Excellent course on frontend with bootstrap 4, very interesting and useful.
– Sridevi Ambati

Great and enjoyable course with a very extensive information on different aspects of Bootstrap. The instructor is very enthusiastic and the depth of his knowledge is impressive. So glad I enrolled
– Nadezda Zajancauskaite

The quality of the course is very good. The tutor explains everything in an ordered way.
– Akash Giri

An outstanding course for learning & understanding Bootstrap 4
– Arifur Rahman

Excellent course
– Monirul Hossain Anik

Instructor really put in the effort to teach us the principles of Bootstrap 4. Would recommend to anyone who wants to learn Bootstrap and is a fan of "video tutorials kinda way of learning".
– Brane Opačić

A well deserved 5/5!! Thank You so much for such an excellent course!!
– Aman Ali

Its timely, and the structure is awesome...
– Waibi Andrew Franklin

Lots of resources, very well documented. I have a good feeling that with this course i am going to be really good at bootstrapp at the end of the course.
– Tim de Tombe

Who this course is for:
  • Anyone who wants to learn how to make responsive and modern websites with Bootstrap 4
  • Anyone who wants to learn how to make quick prototypes