Extending Bootstrap with CSS, JavaScript, and jQuery

Bootstrap gives us some awesome primitives for creating some good looking user interfaces. However, today's users demand more creative UI widgets. In this course, you will learn to create several UI widgets step-by-step.
Course info
Rating
(193)
Level
Intermediate
Updated
Jun 12, 2015
Duration
3h 19m
Table of contents
Course Introduction
Create Left (Sidebar) Navigation
Build Custom Dashboard Widgets
Extending Check Boxes and Radio Buttons
Custom Product Selectors
Customizable Bootstrap Accordions
Let Your User Know Something Is Happening
Description
Course info
Rating
(193)
Level
Intermediate
Updated
Jun 12, 2015
Duration
3h 19m
Description

This course will use a step-by-step approach for showing the student how to build several UI widgets using HTML, HTML5, CSS/CSS3, and Bootstrap. The overall project for this course is a simple Music Site that shows how to build all these UI widgets. There will be step-by-step demos for each module to illustrate the concepts of building custom UI widgets. We will use Visual Studio 2013 to build the HTML, however, any editor can be used as we will not be using any Microsoft-specific technology. The concepts in this course can be applied equally to PHP, MVC, Web Forms, or any web development system. At the end of the course the student will have built several ready-to-use UI widgets they can incorporate into their own web projects right away.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
Angular Security Using JSON Web Tokens
Intermediate
2h 50m
Apr 2, 2018
More courses by Paul D. Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Course Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This course is Extending Bootstrap with CSS, Javascript, and jQuery and this is the course introduction. There's a lot of reasons to watch this course. We're going to do a step-by-step learning on building things like left or sidebar navigation in Bootstrap, some custom dashboard widgets, we're going to learn to extend the checkbox and radio buttons, make them look a little better, build some product selectors, custom accordions, and learn how to work with progress and wait messages.

Create Left (Sidebar) Navigation
Hello everybody. Paul Sheriff here with Pluralsight. This module is Create Left or Sidebar Navigation. Now there's a lot of reasons you want to watch this particular module. We're going to learn to create a left navigation system. This is a sidebar navigation. This is not built-in to Bootstrap, so that means that we have to build our own custom styles. We're going to use media queries and what we'll do is we're going to make that left navigation disappear on small devices at first, and then we'll go on and learn how to show icons instead of text on those same small devices. We'll then show you how to add accordion menus within the left navigation as well, so let's get started.

Build Custom Dashboard Widgets
Hello everybody. Paul Sheriff here with Pluralsight. This module is Build Custom Dashboard Widgets. There's a lot of reasons to watch this particular module and we're going to create some widgets for a dashboard, so things that would go on like a homepage or any place where you want to guide the user to more information, so we're going to create something called a summary block, which looks like what you see here. We're going to create a readme block as well, and we're going to build these step-by-step. We're also going to create some CSS themes for these where we can apply colors that is independent of the structure of each of these blocks, so like I said, we're going to do it step-by-step and build each one individually, so with that let's go ahead and get started.

Extending Check Boxes and Radio Buttons
Hello everybody. Paul Sheriff here with Pluralsight. This module is Extending Check Boxes and Radio Buttons. There's a lot of reasons why you want to watch this module. We're going to create some compelling check boxes and radio buttons that are different from the standard Bootstrap ones that you do. We're going to create them within a button, we're going to add glyphs, and then we're going to change those glyphs using a little bit of jQuery to make them just a little bit easier to press on and have just a little bit more visual appearance to them, so let's get started.

Custom Product Selectors
Hello everybody. Paul Sheriff here with Pluralsight. This module is Custom Product Selectors. There's a lot of reasons to watch this module. We're going to build some custom product selection boxes, we're going to use the Bootstrap panel classes, but add some of our own custom styles as well. We're going to use the check boxes in buttons that we learned about in the last module, we're going to use jQuery to calculate totals of every product that you select, and we're going to use Javascript objects to create some nice generic code that you can use over and over again. Alright, let's go ahead and get started.

Customizable Bootstrap Accordions
Hello everybody. Paul Sheriff here with Pluralsight. This module is Customizable Bootstrap Accordions. The reasons you want to watch this module is we're going to talk about how to customize the Bootstrap accordions or what are called collapsers. What we're going to do is we're going to add some glyphs on the right and we're going to use different glyphs for different accordions. We're also going to make those glyphs change on open and close with a little bit of jQuery and we're going to use data-attributes to avoid hard-coding anything. Alright, let's get started.

Let Your User Know Something Is Happening
Hello everybody. Paul Sheriff here with Pluralsight. This module is Let Your User Know Something is Happening or working with progress messages. There's a lot of reasons to watch this particular module. We're going to learn different methods of updating users on the progress that's happening on your website. We're going to stop users from clicking on buttons twice, we'll create some pop-up messages, learn how to gray out the background, and even add spinning icons from Font Awesome. All of these are great indicators to your users that something is indeed happening and not to start clicking anymore. With that, let's get started.