Bootstrap 4: Building Responsive Web Applications and UIs
- 12 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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
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
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
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 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.
- 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.