Bootstrap 4 - Online Course (Complete Course)

Want to learn to build great websites with Bootstrap 4?
In this complete course you will learn the step-by-step implementation of a complete website with Bootstrap 4 and all related components. We'll show you only what you need to get results quickly and get started right away.

We explain you all the functions and the entire implementation on a modern example website with the help of the Bootstrap documentation, from which you will of course also receive all the code for your own exercise. You will learn the implementation from the Photoshop / PSD file to the finished website based on Bootstrap.

So you'll learn the complete creation process with lots of tips and tricks from everyday agency life. We already work for many years successfully with Bootstrap in agency use and would like to share with you our experiences with this course in a practical way and with many examples.

The recipe for the successful website with Bootstrap
A frontend framework is good and successful when you don't immediately recognize that the website is based on a framework. Maybe you even know one or the other website where you immediately recognize Bootstrap as the basis?

With us you will learn to create websites with Bootstrap in such a way that the visitor does not recognize this foundation directly. Together we will implement an extensive example website that is completely based on Bootstrap. But that's exactly what we will conceal well and fully customize the page!

Let's start with the basics
We'll show you the basics of Bootstrap. Get to know the flexible grid and the helpers. Furthermore you will learn about the file structure and which files can be used for which use case.

The complete implementation step by step - from the PSD file to the finished website!
In our course we do not leave out any step! It already starts with the design of the planned website. We prepared a modern website in Photoshop and implement it from the PSD file. You will learn the complete implementation process from a design template.

So you will not only learn how to use the Bootstrap components, but also how to customize them according to the customer's wishes and your own design.

All components of Bootstrap. All components? All of them!
Bootstrap is one of the most comprehensive frontend frameworks of our time. We will show you all the available components that Bootstrap provides, with corresponding examples.

Develop lively web pages
Bootstrap offers many components that breathe a certain dynamism and life into the website. You will learn how to use them and which use cases can be implemented with them.

Bootstrap and jQuery
To top off the course, you'll learn the ultimate discipline: Bootstrap methods and jQuery. Thanks to the jQuery implementation, you can fully customize each Bootstrap component. Custom controls for the carousel / slideshow or connecting components - no problem thanks to jQuery functions.

Wouldn't it be cool if the website automatically displays information about opening hours when a user wants to request them via a contact form with free text input? Yes, that would definitely be a cool example, and we'll show you how something like that can be implemented.

Bootstrap Reference Card
We have created a clear reference card with important helper classes and quick references to important layout components such as the grid system. You can either print out this multi-page PDF reference card or use it as a digital thought guide.

So what are you waiting for, start using Bootstrap 4 together now!

Excerpt and examples of Bootstrap components, which we will present to you in the course:

• Alerts - warning or success messages
• Badges - Badges for texts and buttons, small but nice
• Breadcrumb - Easy orientation in the content
• Buttons - basic elements of Bootstrap 4
• Card - The universal component
• Carousel - Modern Slideshow
• Collapse / Accordion
• Forms - forms for login or contact
• Jumbotron / Hero Header - Stylish UI Elements
• Modal - content overlay box or popup solution from Bootstrap.
• Navigation - Creative navigation systems
• Pagination - page numbers for blogs and articles
• Popovers - click alternative with more content
• Tooltips - A must-have for many websites or apps
• Progressbar - Visually appealing loading bars or diagrams
• Scrollspy - Scroll content dynamically

Content Components:

• Reboot
• Typography
• Code
• Images
• Tables
• Figure

As well as many other tips & tricks around Bootstrap 4. Watch the free preview videos directly and get started with Bootstrap 4 right away.

If you have any questions or problems during the online course, we will of course be happy to help you personally. You can get in touch with us and all the other participants at any time in the Questions & Answers section of the course.