-
Tab Plugin
Bootstrap provides a number of custom plugins that add features to the user end content of your web pages; such as the tab plugin; which allows you to tabularize web application content. In this video; Jean Boulet demonstrates how to use the tab plugin to convert the content of your web application into tabs.
-
Tabular Navigation Elements
In Bootstrap; you can transform an ordered list into a navigation menu. In this video; Jean Boulet uses Visual Studio to illustrate the necessary code to create a jQuery script and click-event to achieve this.
-
Thumbnails
In Bootstrap; you can use thumbnails to arrange images; video; and text in the browser. In this video; Jean Boulet demonstrates how to create thumbnails using different sized images; organize them in a grid; add captions; and use jQuery to add interactivity.
-
Tooltip Plugin
Bootstrap's Tooltip plugin allows you to add Tooltips to an item in your web application. You can also modify the way in which the Tooltip is displayed. In this video; Jean Boulet demonstrates how to create Tooltips for an item; using the Bootstrap's Tooltip plugin.
-
Transition Plugin
Bootstrap supports various plugins that allow you to extend the functionality of your front-end framework. In this video; Jean Boulet demonstrates how to work with the transition plugin to develop websites that support features such as a carousel.
-
Updating Selected Items from Button Dropdowns
In Bootstrap; you can update selected items from button dropdowns in the HTML to correct which items are highlighted. In this video; Jean Boulet demonstrates how to introduce JavaScript code and jQuery to correctly highlight the button options selected.
-
Wells
Bootstrap's custom wells plugin allows you to make content appear sunk into the containing web page. In this video; Jean Boulet demonstrates how to apply the Bootstrap wells plugin to web content.
-
Accordian
Boostrap's accordion plugin allows you to create panels within your web application; which can expand and collapse when triggered by the end-user. In this video; Jean Boulet demonstrates how to use the accordion plugin to create expanding and collapsing panels within a web application.
-
Adding a Dropdown Menu
In Bootstrap; you can change the format and add dropdown menus to your navigation elements. In this video; Jean Boulet uses the dropdown-menu class to add a dropdown menu to topic 4.
-
Alert Plugin
With Bootstrap's custom alert plugin; you can create alerts containing information for the end-users of your web applications. Once the alert is created; you can also capture information relating to the alert events. In this video; Jean Boulet demonstrates how to create alerts and capture alert event information; using Boostrap's alert plugin.
-
Breadcrumbs
In Bootstrap; you can use the breadcrumbs feature to easily embed a navigation pane into your web page to show your current page and links at the top of the page. In this video; Jean Boulet demonstrates how to make use of this class using Visual Studio 2013.
-
Button Dropdowns
In Bootstrap; a dropdown menu can be created by adding lines of code to the HTML. In this video; Jean Boulet demonstrates how to program an elegant dropdown menu by adding the required code to the HTML so that the result includes a few different options.
-
Button Groups
Bootstrap allows you to create button groups so that users are able to select radio button options easily on web pages and forms. In this video; Jean Boulet demonstrates how to work with the btn-group class to create these button groups.
-
Button Plugin
Bootstrap allows you to add buttons to web pages and then add button states using the Button plugin. In this video; Jean Boulet demonstrates two ways of using the Button plugin to control the different states of a button.
-
Carousel Plugin
Bootstrap allows you to create a carousel on a web page to help display information in an eye-catching format. In this video; Jean Boulet demonstrates how to write the code for a carousel.
-
Code
In Bootstrap; there are different ways to display code; using either the code tag or the pre tag. The code tag uses the inline method while pre displays multiple lines in a block. In this video; Jean Boulet demonstrates these two ways of displaying code.
-
Collapse Plugin
Bootstrap allows you to add functionality to a web page that so that sections of a page can be collapsed. In this video; Jean Boulet demonstrates how to use the Collapse plugin.
-
CSS
Cascading Style Sheets (CSS) is one of the key components of the Bootstrap framework. In this video; Jean Boulet demonstrates the code in a custom bootstrap.css file and how to edit it to overwrite specific tags.
-
Dropdown Plugin
Bootstrap allows you to add dropdowns to organize information on a web page. In this video; Jean Boulet demonstrates how to use the DropDown plugin to convert unordered lists into a dropdown.
-
Dropdowns
Bootstrap allows you to create dropdown menus for easier navigation on web pages. In this video; Jean Boulet demonstrates how to use the dropdown class to create these dropdown options.
-
Emulating a Forms Submission
In Bootstrap; you can correct minor issues when submitting a form to ensure the correct data is loaded in the submission. In this video; Jean Boulet demonstrates how to ensure that the correct dropdown option is captured in the HTML form submission.
-
Environment Set Up
To start using Bootstrap; you need to download both it and jQuery; and then become familiar with the files for a Bootstrap web project. In this video; Jean Boulet demonstrates how to access a web project using an editor; download Bootstrap and jQuery; distinguish the files in a Bootstrap distribution; and order Bootstrap; jQuery; and CSS code in a script.
-
Evolution of
Bootstrap is a front-end framework that makes it easy to create web applications and web sites. In this video; Jean Boulet demonstrates how a Bootstrap template can be used to give a web page a specific look and feel and to make it responsive; without requiring that you write any code.
-
Fixed Grids
In Bootstrap; you can use the Grid System to apply rows; allowing you to organise your web page to have an improved look and feel to it. Employing just a few coding classes you can easily develop a better looking web page. In this video; Jean Boulet demonstrates how to apply the Grid System to a web page.
-
Fluid Grids
In Bootstrap; you can use Fluid Grids to make changes to themes to change the look and feel of a web page. In this video Jean Boulet demonstrates how to change the theme of a web page using the standard CSS method.
-
Glyphicons
In Bootstrap; you can use glyphicons to easily add icons and symbols to web pages. In this example; Jean Boulet demonstrates the various classes of glyphicons that are available.
-
Grid System
The Bootstrap grid system provides a fast and easy way to create web site layouts. In this video; Jean Boulet demonstrates how to use the grid system; using classes to include each row of content in a container and to divide the row content between multiple columns.
-
Helper Classes
Bootstrap comes with several helper classes; including contextual colors and background colors; which allow you to format web pages to suit your needs. In this video; Jean Boulet demonstrates how to work with helper classes and contextual backgrounds.
-
Images and Icons
Bootstrap allows you to create images and icons using CSS if you want to enhance the web applications you are developing. In this video; Jean Boulet demonstrates three classes of images you can use: img-rounded; img-circle; and img-thumbnail.
-
Input Groups
In Bootstrap; input groups can be used to decorate text fields. In this video; Jean Boulet demonstrates the code to add images to these fields using Visual Studio 2013.
-
Jumbotron
In Bootstrap; adding larger headers or paragraphs to pages can make them more visually interesting and help support your message. In this video; Jean Boulet demonstrates how to use Bootrap's Jumbotron to enlarge a header and a paragraph.
-
Labels
In Bootstrap you can create labels using the label class. In this video; Jean Boulet demonstrates the label class; and points out the difference between the label class and the label tag; and shows you how to customize label colors by using the span tag.
-
Layout Components
Bootstrap supports a LayoutIt tool that allows you to build front-end code easily and quickly. In this; video; Jean Boulet demonstrates how to use the LayoutIt tool and the easy drag-and-drop interface builder to add elements such as paragraphs; titles; and objects to your layout.
-
List Groups
In Bootstrap; you can use a list group to display an unordered list in the browser as a neat; well formatted group. In this video; Jean Boulet demonstrates how to work with the "list-group" class to transform the look and feel of a standard unordered list.
-
Media Objects
In Bootstrap; the "media" class lets you treat information in blocks. In this video; Jean Boulet demonstrates how to work with the "media" class and use the "media-object" to adjust the layout of blocks of information in the browser.
-
Merging Dropdowns with Button Groups
You can program with Bootstrap to merge dropdown menus with button groups. In this video; Jean Boulet demonstrates how to merge the dropdown menu from the previous lesson with a button group.
-
Modal Plugin
Bootstrap provides a number of custom plugins; such as the modal plugin; which allows you to create modal windows within your web applications. In this video; Jean Boulet demonstrates how to add modal windows to your web applications; using the Bootstrap modal plugin.
-
Page Header
Using Bootrap's Page Header class; you can adjust the padding; margins; and borders of your Page Header. In this video; Jean Boulet demonstrates the differences between regular Page Headers and Bootstrap's Page Header class.
-
Pagination Overview
In Bootstrap; you can emulate paging by using the 'pagination' class. In this video; Jean Boulet demonstrates how to use the pagination class; adjust the scale of the pagination; and mark a page as active.
-
Pagination with jQuery and JavaScript
When creating pagination in Bootstrap; you need to use jQuery and JavaScript to make the pagination work. In this video; Jean Boulet demonstrates how to use code to activate the pagination and enable navigation between pages.
-
Panels
In Bootstrap; the "panel" class provides a way for you to organize content in the browser into a box with a formatted panel heading and a panel body with paragraphs. In this video; Jean Boulet demonstrates the panel component; how to manage the look and feel of it; and what it looks like in the browser.
-
Popover Plugin
Bootstrap's popover plugin allows you to control what information is available within web app popovers; and how it is displayed to the end user. In this video; Jean Boulet demonstrates how to apply the popover plugin to items in your web application.
-
Progress Bars
In Bootstrap; you can create a progress bar that will dynamically display the percentage of what has been completed so far. In this video; Jean Boulet demonstrates the "progressbar" class and examines the elements that form a progress bar.
-
Responsive Navigation Bars
In Bootstrap; a Navigation Bar can be programed in order for its behaviour to be made more responsive. In this video; Jean Boulet demonstrates how to program a Navigation Bar in Bootstrap; add an icon; and program it to be more responsive by inserting a few lines of code.
-
Responsive Utilities
Bootstrap supports various responsive utilities; including the hidden and visible classes that allow you to hide or show content on a site; respectively. In this video; Jean Boulet demonstrates the hidden and visible responsive utilities in Bootstrap.
-
Scrollspy Plugin
Bootstrap allows you to use the Scrollspy plugin to navigate to different section on a web page; while highlighting the selected section on the menu bar. In this video; Jean Boulet demonstrates how to use the Scrollspy plugin to navigate to sections on a web page to update menus and attributes.
-
Simple Layout
With Bootstrap’s grid system; you can set the size of each column that contains web page content to change based on the screen size of the device on which it displays. In this video; Jean Boulet demonstrates how to specify column sizes and how to use JavaScript to set web page content to resize automatically.
-
Badges
You can use Bootstrap to create badges. In this video; Jean Boulet demonstrates how to create badges using the badge class; use Styles to customize the badges; and make badges active.
-
Navigation Bars
Bootstrap allows you to convert navigation elements to navigation bars. In this video; Jean Boulet demonstrates how to use codes to convert these elements to bars via navigation tags.
-
Alerts
"In Boostrap; you can create alerts that provide feedback to the user. In this video; Jean Boulet demonstrates how to use the ""alert"" class to create alerts and control the look and feel of the alerts in the browser."
-
Buttons
Anchor tags and button tags are used in Bootstrap to change the size of the text and color to buttons on a web page. In this video Jean Boulet demonstrates how to customize buttons using Bootstrap.
-
Typography
Bootstrap allows you to customize the typography of text using various fonts; heading styles; and alignment options. In this video; Jean Boulet demonstrates how to customize the typography in Boostrap.
-
Grid Layouts
With Bootstrap’s grid system; you can create web page layouts by dividing content into rows; each with logical units split across multiple columns. In this video; Jean Boulet demonstrates how to offset the columns in a grid so that content appears centered or properly spaced out.
-
Introduction
Twitter Bootstrap is a front-end framework that simplifies the development of web projects. In this video; Jean Boulet demonstrates what makes up the framework and the code for a web page that uses it.
-
Forms
In Bootstrap; if you want to improve the look of a web page; you can use forms to make it more visually appealing. In this video; Jean Boulet demonstrates how to apply forms classes to group data that belongs together to improve the look of a web page.
-
Tables
Classes are used in Bootstrap tables to format tabular data. There are various features that can be applied to change the look and feel of data in a table; using different classes. In this video; Jean Boulet demonstrates how to apply table classes to design tables around data on a web page.
