This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp.
At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites.
This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4.
Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

AA

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

BB

Nov 07, 2018

Filled StarFilled StarFilled StarFilled StarFilled Star

The instructor knows his subject well. He uses real world examples that allow you to achieve something tangible. On a personal note I loved listening to his instruction. He is an enjoyable teacher.

From the lesson

Bootstrap Javascript Components

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.

Taught By

Jogesh K. Muppala

Associate Professor

Transcript

[MUSIC] Let us now try to understand several mechanisms to enable us to display information to the users overlaying the content of your web page. So here we'll look at three different constructs that are available in Bootstrap called tooltips, popovers, and modals. So what are tooltips, popovers and modals and how are they useful? We'll look at some basic ideas first ,and then we'll go on to look at some examples. In the exercise that follows, we'll use tooltips and modals in our web page, and we'll look at an example of popovers. So, as I mentioned, tooltips, popovers, and modals are a way of revealing content to the users, when the user interacts with certain elements on your web page. Say for example when the user's mouse clicks on a button, or hovers over a button, or clicks on a link, or reaches a certain point on your web page. So all these will trigger information to be displayed to the users. So in this case, the information is displayed as an overlay on top of your web page. So the underlying content of the web page is still there, but this is laid out on top of the underlying content. So in terms of flexibility, tooltips are the simplest to implement, but at the same time have limited flexibility in how they can display information. Popovers are more flexible than tooltips, but they also have their own limitations. Modals give you the most extensive support for displaying content in a wide variety of ways. As an example, let's go to our webpage that we have been working on. You see that when we hover our mouse pointer onto this button. You see this message popping up on the screen here, with some additional information. This is an example of a tooltip. This allows you to display smaller amounts of information to the users. So for example if you are trying to guide users through your website and want them to know what happens when you click various locations any web page, these maybe a good way of reminding them of what is expected. So you could easily design for example, walkthroughs of your website using these tooltips to indicate to users. If you want a bit more detailed information, then popovers would be more useful. The same example, implement and using a popover would look like this. Now in this case, you will have to explicitly click on the button to show the popover. So in that case, the popover is shown with some title information, and then the actual content at the bottom in that popover. Now, dismissing the popover will require you again to click on the bottom there. So this is the behavior of a popover. In some circumstances, popovers are more useful than tooltips. Our third kind of data overlay is the modal. A modal allows you to present more detailed information to the users than a tooltip and popover. The content of the modal is itself divided into a header, body, and the footer. And the modal itself can contain a lot more detailed information. And you can use the entire Bootstrap grid, inside the modal body, to organize the actual content. We look at a couple of examples of the use of modals next. Going to our web page, you will see that on the right hand side, here we have a link here called Login. So when you click on that link, you will notice that this modal with their login form is popped up on the screen. So this is the typical behavior of a modal. And so here you can type in the information, and then click on the Sign In button to sign in to your website. Going to your Coursera page, here is a real life example of the use of a modal. So for example, if you click on the Log In button here, you can see that on Coursera, a form pops up on the screen. So this is another use of a modal in your web page. Now that you have seen examples of tooltips, popovers, and modals, let's go to the next exercise, where we'll create a tooltip on our index.html page. We'll also create a modal that allows the user to type in information for logging in into our web page. [MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.