Bootstrap 4: Building Responsive Web Applications and UIs
0.0 (0 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.
11 students enrolled

Bootstrap 4: Building Responsive Web Applications and UIs

Build powerful faster and beautiful websites, web application development with the Bootstrap 4 framework
0.0 (0 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.
11 students enrolled
Created by Packt Publishing
Last updated 1/2019
English
English [Auto-generated]
Current price: $129.99 Original price: $199.99 Discount: 35% off
3 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 12 hours on-demand video
  • 1 downloadable resource
  • 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
  • Get to grips with how the web is heading and how you can stay on top of the mobile trend
  • Using Bootstrap’s form helper and contextual classes to add responsiveness to your app
  • Create a compelling and dynamic Bootstrap 4 UI using Bootstrap Toggle
  • Create animated progress bars & dashboards.
  • Master styling, navigation, and alerts, and responsive queries
  • Explore options for rapid web development
  • Bring your web pages to life using Bootstrap jQuery plugins
  • Build highly customizable web interfaces
Course content
Expand all 110 lectures 12:07:16
+ Building Web UIs with Bootstrap 4
35 lectures 04:09:34

This video shows the entire overview of the course.

Preview 03:33

This video will walk you through the new features of Bootstrap 4.

  • Learn about the most popular new features

  • Get to know how they are different from Bootstrap 3

  • Get to know the benefits of the new features

Exploring the Latest Features in Bootstrap
03:34

This video will make you understand how to migrate from Bootstrap 3 to Bootstrap 4.

  • Get an overview of the migration plan

  • Learn about the migration process

  • Learn about concrete solutions and online tools for the migration

Migrating to Bootstrap 4
04:02

This video will make you understand how to include Bootstrap 4 into your website.

  • Learn about the basics of HTML, CSS and JS

  • Include the CSS file first

  • Then include the JS file

Including Bootstrap in a Web Project
06:38

This video will showcase the customization options that Bootstrap 4 offers.

  • Learn what can be done in Bootstrap 4

  • Walk through the solutions to do so

  • Go through a demo of a concrete customization

Customizing Your Framework
03:30

This video will give you an overview of Bootstrap themes.

  • Go through Bootstrap 4 themes

  • Explore themes

  • Learn about the utility of themes

Digging into the Themes
03:56

This video will make you understand how to use the Bootstrap 4 grid system.

  • Explain the basics of the Bootstrap grid system

  • Develop a grid system using Bootstrap

  • Expand on our existing demo with more details

Implementing the Bootstrap Mobile-First Grid System
11:05

This video will show you how to include HTML image elements with Bootstrap.

  • Explore how HTML image elements work

  • Perform a step-by-step solution demo

  • Explore various options for the image elements

Incorporating HTML Image Elements
07:32

What are Bootstrap helper classes and how to use them?

  • Get an introduction to helper classes

  • Explore the helper class utilities in our project

  • Explore more complex helper classes

Applying Bootstrap Helper Classes
09:04

This video will show how to create a responsive website using Bootstrap 4.

  • Learn about responsive design

  • Learn how to make our project responsive

  • Learn about the benefits of flexbox in responsive design

Making Your App Responsive
07:12

This video will give you an overview of Bootstrap 4 responsive utilities.

  • Explore the responsive helper classes

  • Implement responsive utilities

  • Learn how to create custom responsive helper classes

Using Responsive Utilities
07:01

Explore different navigation patterns.

  • Showcase navigation patterns

  • Suggest best practices

  • Demo of different patterns

Navigation Patterns and Best Practices
08:28

How to use dynamic tabs and pills?

  • Introduce dynamic tabs

  • Introduce dynamic pills

  • Provide code examples

Working with Dynamic Tabs and Pills
09:39

How to use the Bootstrap 4 navigation component?

  • Explore bootstrap 4 navigation component

  • Provide integration example and code

  • Provide customization options

Adding a Navigation Bar
09:51

How to add a responsive sidebar?

  • Introduction to sidebars

  • Use Bootstrap to create a sidebar

  • Customize and style the sidebar

Adding a Responsive Sidebar
06:48

How to customize the Bootstrap 4 navigation bar?

  • Explore Bootstrap 4 buttons

  • Include buttons in our navigation

  • Showcase different code examples

Working with Navigation Bars and Menu Buttons
05:15

This video will show how to use Bootstrap 4 forms.

  • Explore HTML forms

  • Develop a form for our project

  • Include customization options

Creating Forms and Inputs
11:52

How to use the Bootstrap toggle plugin?

  • Showcase the plugin

  • Integrate the plugin into our project

  • Explore and show the customization options

Using Bootstrap Toggle
07:42

How to use the Bootstrap select plugin?

  • Showcase the plugin

  • Integrate it into our project

  • Explore and show the customization options

How to Extend Your Select Elements with Bootstrap Select
06:10

This video will show you how to use the Bootstrap slider plugin.

  • Showcase the plugin

  • Integrate the plugin into our project

  • Explore the customization options

Adding Input Sliders with Bootstrap-Slider
04:26

This video will show you how to create equal-height columns in Bootstrap 4.

  • Explore Flexbox

  • Explain the Bootstrap 4 grid system

  • Provide code examples

Employing the Flexbox Grid to Create Equal-Height Columns
06:36

This video will teach you how to use the Bootstrap fileinput plugin

  • Showcase the plugin

  • Integrate the plugin with our project

  • Explain and show the customization options

Creating File Inputs with fileinput.js
10:02

Understand how to use the Bootstrap datetimepicker plugin.

  • Showcase the plugin

  • Integrate the plugin with our project

  • Explain and show the customization options

Adding Dates and Times to Your Inputs with Bootstrap-Datetimepicker
06:29

This video will show the use of the Bootstrap daterange plugin.

  • Showcase the plugin

  • Integrate the plugin with our project

  • Explain and show the customization options

Choose Date Ranges with Date Range Picker
08:49

This video will give you an overview about masonry layouts.

  • Learn to use bootstrap to create masonry layouts

  • Understand how does the card component help us build masonry layouts

  • Customize the bootstrap cards layout?

Creating Masonry Layouts with Bootstrap
06:22

This video will give you an overview about off-canvas menus.

  • Learn to use bootstrap to create off-canvas menus

  • Use off-canvas menus in responsive design

  • Customize your bootstrap off-canvas menu

Adding an Off-Canvas Menu
04:38

This video will give you an overview about the bootstrap scrollspy component?

  • Understand how to use scrollspy component

  • Add interactions to our elements with scrollspy

  • Understand how scrollspy work on phones and tablets

Using Bootstrap Scrollspy to Add Scroll Tracking
05:31

This video will make you understand how to use the bootstrap slider plugin?

  • Showcase the plugin

  • Integrate the plugin to our project

  • Explore the customization options

Creating Sliders with Bootstrap Carousel
08:30

This video will give you an overview about the form validation.

  • Learn about native form validation

  • Get to know what does bootstrap offer in terms of validation

  • Customize the look and feel of our validation

Native Form Validation with Bootstrap
07:17

This video will make you understand how to detect browsers.

  • Learn the need to detect browsers

  • Learn the difference between feature detection and browser detecition

  • Learn to customize plugin

Browser Detection
08:40

This video will make you understand how to display images using bootstrap lightbox.

  • Start using this plugin with Bootstrap

  • Learn the benefits and/or problems with this plugin

  • Learn to customize this plugin

Display Images Using Bootstrap Lightbox
04:34

This video will make you understand how to improve your tables with data tables.

  • Start using this plugin with Bootstrap

  • What are some of the benefits and/or problems with this plugin

  • Learn to customize this plugin

Improving Our Tables with DataTables
07:53

This video will give you an overview about the Bootstrap 4 modal component.

  • Learn to use the Bootstrap 4 modal component

  • Learn about the JavaScript methods that come with the component

  • Learn about JavaScript events that come alongwith the component

Programmatically Toggling Modals
06:30

This video will make you understand what does the typeahead plugin do?

  • Integrate the plugin into our project?

  • Learn about the options we can use and ways to customize

  • Learn about the alternatives to the typeahead plugin

Using Typeahead
10:46

This video will make you understand what does the Bootstrap popover JavaScript component do?

  • Start using the plugin with Bootstrap

  • Learn to use the Bootstrap popover component

  • Customize the Bootstrap popover component

Popovers
09:39
+ Developing Web Application Using Bootstrap 4
19 lectures 01:37:15

This video will give you an overview about the course.

Preview 02:24

In this video, we are going to first create the code structure for our web application and then add the navigation bar.

  • Add the search input

  • Add the menu options

  • Add tweet button

Understanding Web Applications
07:12

In this video, we will customize the navigation bar, add some tweaks, and fix viewport issues.

  • Setup custom theme

  • Fix the list navigation bar

  • Add badges

Customizing Navigation Bar
04:54

In this video, we are going to fix the 3 issues that are present in the navigation bar.

  • Fix the Tweet button

  • Fix the color of the collapse hamburger button

  • Customize the collapsed navigation bar using Bootstrap helpers

Fixing Issues
03:13

In this video, we are going to create and add cards to our web applications.

  • Create cards

  • Add cards

  • Change the list style

Cards
07:03

In this video, we are going to implement the main content in the middle of the page. This content will hold the feeds while allowing new tweets.

  • Create a nice and friendly feed

  • Add pagination

  • Create the right-hand-side content

Implementing the Main Content
07:04

Now we will create some components that interact with the user. To start this, we will introduce alerts, which are very common components of every web app.

  • Replace ol.breadcrumb with .alert

  • Create dismissible alerts

  • Customize alerts

Alerts
03:04

Progress bars are very useful in web applications in cases where, you need to wait for an action to be sent to the server while maintaining a feedback for the user that something is being done in the background. In this video, we will create a progress bar.

  • Create another alert that contains a progress bar

  • Apply stripe marks to the progress bar

  • Animate the progress bar

Progress Bar
03:20

In this video, we will move ahead and build a setting page for our web application.

  • Create another one named settings.html and update the link at the navigation bar

  • Add some content

  • Use pills and add tabs content

Settings Page
06:55

User content helps reach the audience. So we will be creating user info tab, in this video. In the form, we will have three inputs (name, username, and e-mail) followed by a button to save the changes.

  • Use the .form-horizontal class to make each form input next its label

  • Fill the right column of the web app

  • Add labels and badges

User Info Tab
06:00

JavaScript plugins. They all come together when we download the framework, and all of them are ready for use when the bootstrap.js file is loaded in HTML. In this video, we will learn about them 

JavaScript Plugins
03:14

Modal is a customizable and responsive popup

  • Add modal header and body

  • Create custom modal

Modals
05:43

We will use tooltips for the buttons present in every tweet and add a popover show more information that does not fit in a simple tooltip component.

  • Just add the markup in bold to the tweets in the middle column

  • Add tooltip

  • Add the popover Bootstrap event

Tooltip and Popover
06:58

The affix plugin aims to toggle the position of an element between fixed and relative, emulating the effect of position.

  • Apply the sticky effect the left #profile element

  • Create some piece of JavaScript code using the events triggered for the plugin.

Affix
02:57

To finish the web application example, we just need to create another modal when we click on the Messages link at the navigation bar.

  • Create the modal for the Tweet button

  • Create a new button

Finishing the Web App
03:02

In this video, we will build the navigation bar one last time.

  • Create a <nav> element and inside it, create a .container-fluid and a .row:

  • Create the dashboard title and a refresh button

  • Add navigation search

Last Navigation Bar
08:55

In this video, we must fill the main content using a fluid layout.

  • Create a single .row and two columns

  • Fill #side-menu with content

  • Add collapse plugin

Main Fluid Content
06:16

In this video, we will create a set of cards almost similar to the cards made in the web application demo, along with the use of some external plugins for chart generation.

  • Create some common CSS in our main content

  • Round the charts

  • Create a quick statistical card

Filling the Main Content
06:28

Overloading is another cool feature from these plugins is that they provide animations for charts, making the final result very user friendly. We will be looking at it in this video.

  • Create a <div> to keep the loading

  • Create an overlay element that will appear at the top of all elements

Overhead Loading
02:33
+ Mastering Bootstrap 4
56 lectures 06:20:27

This video provides an overview of the entire course.

Preview 07:26

Source online for Bootstrap source files

  • What resources are online to get Bootstrap

  • Links and websites

  • Use the resources within your code

Getting Bootstrap – Download - CDN
06:59

Using Bootstrap within your web applications

  • Learn to connect to the Bootstrap resources

  • Structure of CSS and JS files

  • How to bring it into you project code

Adding Bootstrap to Web Projects
07:07

Find out more about using Bootstrap benefits of Bootstrap

  • Learn about the Bootstrap Grid

  • How Bootstrap Works

  • Understand the foundations of Bootstrap

What is Bootstrap?
06:42

Basics of how Bootstrap works.

  • Type of main containers used for web development

  • Demonstrate of using containers

  • Start point to Bootstrap Framework

Bootstrap Containers
05:51

How to work more efficiently to build websites quickly

  • What should be included in your basic template

  • Structure of the template

  • Setup of the template and repurpose it for unlimited projects

Creating a Bootstrap Template
05:36

Positioning of content making it respond to different size screens.

  • Basics of the Bootstrap Grid

  • Rows and columns for layout structure

  • Options that you can use to position content within the web project

The Grid System
08:37

Focus on columns and why it's important to understand how they work.

  • View column options to effectively use the grid

  • Move columns tweaking and customizing display output

  • Setup columns to look the way you need them

Bootstrap Columns and Rows
10:27

How to quickly style headings and highlight visible content within your web project

  • What new with Jumbotron and how to bring it into your project

  • Jumbotron options

  • Add Jumbotron

Bootstrap Jumbotron
04:22

Going beyond HTML with Bootstrap typography, making typically styling easy with Bootstrap.

  • Make content stand out

  • Easy classes that make content pop

  • Options for classes within the framework

Bootstrap Typography
12:17

Alignment of text and text options

  • Get text to look and feel the way you want

  • Explore options for text using Bootstrap Classes

  • Bootstrap classes to make your text look good.

Text Styles
09:45

New Bootstrap 4 component for grouping content together

  • Use of cards

  • Options to make Cards adding images and content

  • Card structure

Bootstrap Cards
10:31

Visual images and what can be down with bootstrap

  • Make images mobile ready

  • Options for Bootstrap images

  • Add and presenting images within Bootstrap

Bootstrap Images
06:27

In this video we are going to look at the class Nav

  • Learn how to use Nav class in Bootstrap

  • Present Navigation options to end users

  • Understand Nav dropdowns and how we can handle tabbed content

Bootstrap Nav
06:28

How to use Bootstrap classes to make buttons

  • Buttons to get user attention and provide functionality

  • Button options within Bootstrap

  • Turn any element into a button

Bootstrap Buttons
05:02

more advanced options for Bootstrap buttons

  • Grouping of buttons within web applications

  • Form buttons and more

  • Use of buttons everywhere

Bootstrap Button Grouping
06:51

How to make your text appear and get presented within your web application.

  • Working with large blocks of text making it appear consistent across pages

  • Alignments and block of text wrapping options.

  • Apply text styling using Bootstrap

Bootstrap Alignments and Styling
05:20

Making website design easy and quick with Bootstrap

  • Tips and tricks to add cool components to Bootstrap

  • Options and classes for quick bootstrap components

  • Add Bootstrap components like breadcrumbs, pagination and progress bars

Bootstrap Other Components
08:33

In this section we are going to go have a look at Glyphicons and Font Awesome

  • Learn about Glyphicons

  • Explore the different alternatives to Glyphicons

  • Understand how to use Font Awesome

Glyphicons and Font Awesome
05:52

In this video we are going to learn about Bootstrap Alerts

  • Get to know about Alert sliding

  • Learn how to do linking with alerts

  • Discover how to do messaging with Alerts

Bootstrap Alerts
05:40

In this lesson we are going to revisit Pagination in Bootstrap

  • Learn how to do navigation of several pages

  • Understand the different sizing of Pagination

  • Understand the concept of Aria labels

Bootstrap Pagination
04:36

In this video we are going to look at the class Nav

  • Learn how to use Nav class in Bootstrap

  • Present Navigation options to end users

  • Understand Nav dropdowns and how we can handle tabbed content q

Bootstrap Nav
09:43

In this video we are going to look at what we can do with Bootstrap Navbars

  • Creating a Nav class

  • Exploring Nav options

  • Understanding Nav dropdowns

Bootstrap Navbars
07:28

In this video we are going to look at Responsive Media Queries

  • Learn how to work with different size screens

  • Understand the concept of Hidden size-up

  • Understand the concept of Hidden size-down

Responsive Media Queries
07:57

In this section we are going to introduce you to form elements and form classes

  • Understand grouping of elements

  • Learn how to make forms inline

  • Understand the Bootstrap grid and forms and what can be done together with them

Forms working with Field
06:37

In this video we are going to learn about Bootstrap Forms and how we can use them

  • Get to know about hidden elements

  • Learn how to attach file browser buttons

  • Discover how to handle checkboxes, radio buttons and help text within the forms

Bootstrap Forms
16:31

In this lesson we are going to look at Bootstrap Responsive Utilities

  • Understand Hidden Up/Down for responsive design

  • Learn the concept of Visible Up/Down for responsive design

  • Understand how to toggle Print classes

Bootstrap Responsive Utilities
04:14

In this section we are going to highlight some of the top resources online.

  • Get to know where to practice Bootstrap online

  • Discover the various resources for building Bootstrap websites

  • Learn to use Bootstrap code snippets copy paste

Useful Web Resources for Better Building
09:43

In this lesson we are going to look at Bootstrap Template resources

  • Learn all about online templates

  • Look at different Bootstrap templates available online

  • Understand how we can make use of free templates and themes available for Bootstrap

Bootstrap Template Resource
03:45

To help create maintainable code, the SOLID principles of software design can be used as a tool to help ensure our codebase stays in a testable and robust state.

  • Explore all about online templates

  • Discussing Bootstrap templates

  • Understand bootstrap website template

Bootstrap Templates
03:51

What jQuery is and how to get it into web projects for dynamic capability.

  • Find out more about using jQuery and what it can do

  • Where to get jQuery and how to add it

  • How jQuery and Bootstrap work together

Setting up jQuery
05:16

Where to get jQuery and how to bring it into your projects

  • Web resources for getting jQuery

  • Required files from Bootstrap to get jQuery to work

  • Options for using jQuery with Bootstrap

CDN and what can be done with jQuery
10:33

Simple jQuery functional elements

  • When and how to add tooltips

  • Introduction to using event functions

  • Options for Tooltip components within Bootstrap

Bootstrap ToolTips
05:55

Learn how to effectively create popup messages with Bootstrap Modals

  • Method of creating a Modal

  • Structure of a Bootstrap Modal

  • Options for modals and creating multiple modals

Bootstrap 4 Modal
08:06

Create image carousels with classes and attributes

  • How to structure a Bootstrap Carousel

  • Basics of Carousel classes and attributes

  • Create events and adding carousels into web projects

Bootstrap 4 Carousel
08:29

Bringing bootstrap carousels to the next level

  • Add carousel functions

  • Do more with carousels

  • Customize the look and feel of a carousel

Bootstrap 4 Carousel options
04:13

Bootstrap and adding active classes to current screen locations.

  • How to setup a Scrollspy, what it is and how it works

  • Options for Scrollspy

  • Attach Scrollspy functionality to navigation menus

Bootstrap 4 ScrollSpy
05:16

Learn about getting started to build a website with Bootstrap

  • How to plan out your website

  • Tools and resources for planning websites

  • Pitfalls and considerations for good website design

Planning Design Website Concept
03:02

Starting off to create a website

  • Files needed and how to setup your development environment

  • Plan for content and how to structure your site

  • What you need and how to create an outline

Creating Template and Container
03:03

How to get started with your web project before you have the assets

  • What dummy and placeholder content is

  • Get placeholder content and resources for it

  • Use placeholder content to develop your website

Add Placeholder Content and Sections
04:11

How to add navigation to your website

  • What you need to plan for with navigation

  • Design for what your users expect and need

  • Learn about setting up a navigation bar using Bootstrap

Create Navbar
06:24

Why content area planning is important and how to do it

  • Prepare for content

  • Setup your website structure

  • How to think about website design and how Bootstrap makes it easy.

Create the Content Area
08:58

Website review process to fine tune your site

  • Look for when testing your website functionality

  • How to quickly add styling and backgrounds

  • Review procedure for web design

Update and Tweak Layout
04:55

Web resources that you can use to supplement Bootstrap

  • Web resources that you can use to supplement Bootstrap

  • What to consider with CSS

  • Test and preview your website

Add custom Styling and Fonts
10:31

Web users are expecting more, they are looking for dynamic capabilities within website.

  • Plan for user interactions

  • Add jQuery for dynamic and interactive content

  • Test and updating website functionality

Create Functionality Using JQuery
06:55

Steps and resources for starting a web project

  • Plan out your website

  • Resources and how to find them

  • Get started with your web project

Planning Design Website Concept
06:22

Starting with a template and building a website from scratch

  • Plan and how to setup a website

  • Resources and links to use

  • Setup of template and web development environment

Creating Template and Container
04:56

Design your website without assets ready

  • How and why placeholder content is used

  • Get dummy placeholder content

  • Make it look real and develop your code

Adding placeholder Content and Sections
05:01

Using navigation bars design patterns for web users.

  • Develop a linking and connection structure for a website

  • Create a bootstrap navigation bar

  • Apply your navigation bar to your website

Creating Navbar
05:32

how to prepare for content

  • Content preparation and setup

  • Structure your website

  • Design steps and planning

Creating the Content Area
06:53

Use Bootstrap to style amazing contact forms

  • Plan and developing a contact form

  • Form setup and structure

  • Contact form options and development

Creating Contact Form
07:09

Create visually styled content using Bootstrap

  • How and why cards are used

  • Make it responsive

  • Use the Grid and bring it together using Bootstrap

Creating Portfolio page
06:51

Prepare your website and check it for tweaks and updates

  • Look for to get your site ready

  • Update styling and tweak your code

  • Look for and how to review your website

Updating and Tweak Layout
02:57

Customize your website to look the way you want

  • Online resources and options to style your content

  • How to tweak and update styling

  • Make your site look good with styling

Adding Custom Styling and Fonts
03:48

Do more with your website make it dynamic and interactive

  • How and why use jQuery

  • Add jQuery and making it work

  • Seamless functionality with jQuery

Creating Functionality Using JQuery
07:46

What Bootstrap can do to make it easy to add cool stuff to your website

  • Which Bootstrap components are used often

  • Setup dynamic interactive Bootstrap components

  • Test and website functionality review

Adding in Bootstrap jQuery Components
07:07
Requirements
  • Prior knowledge of HTML, CSS, and jQuery and some experience of incorporating JavaScript plugins are required.
Description

Bootstrap, one of the most complete frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout in faster, easier, and less repetitive solution to designing and building applications.

With this master class course, you'll first learn to modify Bootstrap 4 with the help of plugins to build highly customized UIs. Then you'll learn how to show or hide a page element on the basis of browser screen size using Bootstrap’s responsive utility classes. Moving forward, you'll learn to use containers, grids, and Typography in Bootstrap as well as forms, buttons, navigation, and other interface components. Finally, you will also tour the anatomy of a Bootstrap plugin, create your own custom components, and extend Bootstrap using jQuery.

By the end of this video, you will explore the fullest potential of Bootstrap by building highly customized, responsive and mobile-first applications, also you will have created a web application that looks like Twitter and a dashboard.

Contents and Overview

This training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Building Web UIs with Bootstrap 4 will begin by showing you how to modify Bootstrap 4 with the help of plugins to build highly customized and powerful UIs. On your way, you will discover several techniques that can be applied to your own web projects to build sleek, beautiful UIs and customize them. You will implement the Bootstrap mobile-first grid system, use the classes Bootstrap has in place to add responsiveness and aesthetic touches to image elements and apply handy helper classes like contextual text and background colours, floating and centring elements and clearing floated elements. Finally, you will learn how to show or hide a page element on the basis of browser screen size using Bootstrap’s responsive utility classes. By the end of this video, you will explore the fullest potential of Bootstrap by building highly customized, responsive and mobile-first applications. You will also modify, and integrate bootstrap with jQuery plugins to achieve optimal results for your web projects.

The second course, Developing Web Application Using Bootstrap 4 covers various examples showing you how to create interesting web applications resembling Twitter using Bootstrap and how to master frontend frameworks. We begin with a web application that only uses Bootstrap elements and components. Then we start using some JavaScript plugins in the web application example. By the end of this course, you will have created a web application that looks like Twitter and a dashboard

The third course, Mastering Bootstrap 4 start by getting to grips with using containers, grids, and Typography in Bootstrap as well as forms, buttons, navigation, and other interface components. Then, you’ll get to work with alerts, navigation components, and responsive queries. Moving forward, you’ll work with Bootstrap forms and queries, and access resources that will help you build attractive websites. After that, you’ll find out how to use utility classes and various form options. Among other things, you will also tour the anatomy of a Bootstrap plugin, create your own custom components, and extend Bootstrap using jQuery. By the end of this course, you will have a thorough knowledge of the framework’s ins and outs, and be able to build highly customizable and optimized web interfaces. Your websites and projects of all sizes will work across multiple screens sizes perfectly with Bootstrap.

About the Authors:    

Vedran Cindric has been a front-end developer for around 15 years now and has been using Bootstrap exclusively for the last 4 years. He has run a web development company called “Flip .hr” for 5 years now, and he has worked on a lot of interesting projects for clients all around the world. He really enjoys writing great code, optimizing websites, and creating awesome responsive experiences. He has written some articles on Bootstrap before, but this is his first time creating a video course.

Silvio Moreto is a developer with more than 7 years' experience with frontend technologies and has created many websites and web applications using the Bootstrap framework. From simple pages to complex ones, he has always used the Bootstrap framework. Silvio is also the creator of the bootstrap-select plugin which is very popular among the community, replaces a selected element with a Bootstrap button drop-down element. Silvio foresaw that a plugin like this one was missing in the original framework, and could be useful for the community. So he created the plugin, and the community helps him maintain it. Besides this, he is very active in the open-source community, participating in some open-source repository and issue communities, such as Stack Overflow. Also, he finished third in the worldwide Django Dash 2013 challenge.

Laurence Svekis is a highly experienced web developer with over 18 years of web development experience. He has worked on various large and small projects, and has been an instructor for several Bootstrap projects on a number of platforms, reaching a large number of students and professionals. His web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP, and MySQL. Laurence is passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.

Who this course is for:
  • This course is for web designer or a developer, Frontend developers who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4.