Learn Bootstrap - For Beginners

Name: Learn Bootstrap - For Beginners
Rating: 4.2 (1995 reviews)

Learn to create mobile-responsive web pages using Bootstrap

Created byYouAccel Training

Last updated 4/2019

English

What you'll learn

Bootstrap Page Structure
Bootstrap Grid System
Bootstrap Layouts
Bootstrap Typography
Styling Images
Bootstrap Tables, Buttons, Badges, & Progress Bars
Bootstrap Pagination
Bootstrap Panels
Bootstrap Menus & Navigation Bars
Bootstrap Carousel & Modals
Bootstrap Scrollspy
Bootstrap Themes

Course content

1 section • 44 lectures • 2h 45m total length

Introduction to Bootstrap2:12
Embedding Bootstrap0:49
Bootstrap Basic Page Structure5:29
Bootstrap Grid System5:32
Bootstrap Three Column Layouts2:24
Bootstrap Typography6:50
Bootstrap Tables3:00
Bootstrap Styling Images2:17
Bootstrap Jumbotron2:27
Learn to create a Bootstrap jumbotron by applying the jumbotron class to a div, with h1 for the heading and p for the subtitle, and explore full-width versus container layouts.
Bootstrap Wells0:58
Bootstrap Alerts2:24
Bootstrap Buttons7:11
Bootstrap Button Groups1:57
Bootstrap Justified Button Groups2:32
Learn to create a full-width bootstrap button group with the button group justified class, featuring responsive behavior and two methods using links or button elements.
Bootstrap Glyphicons2:52
Bootstrap Badges and Labels3:12
Bootstrap Progress Bars2:54
Bootstrap Pagination2:24
Bootstrap Pager Pagination1:17
Bootstrap List Groups5:10
Bootstrap Panels2:33
Bootstrap Dropdown Menus4:37
Bootstrap Collapsibles3:24
Learn to create Bootstrap collapsibles that show or hide content by clicking a button or link using data-toggle='collapse' and data-target='#id' to toggle a div with class 'collapse'.
Bootstrap Collapse Panel1:53
Bootstrap Collapse List Group0:57
Bootstrap Accordian5:01
Build a Bootstrap accordion with a panel group, a unique id, and data-parent. Link headers to content divs via href to enable one panel to expand while others collapse.
Bootstrap Tab Menus4:46
Bootstrap Pill Menus3:12
Learn to build inline and vertical Bootstrap pill menus using ul and li elements, highlighting active state with class active, and add dropdowns using dropdown, dropdown toggle, and data-toggle attributes.
Bootstrap Dynamic Tabs and Pills4:03
Bootstrap Navigation Bar6:24
Bootstrap Collapsible Navigation Bar3:30
Learn how to make a Bootstrap collapsible navigation bar that collapses on small screens, using a toggle button, data attributes, and a collapsible div to hide and show links.
Bootstrap Forms - Vertical and Inline3:36
Explore bootstrap forms with vertical, horizontal, and inline layouts, using a vertical login example that includes email, password, a remember me checkbox, a submit button, and email validation with form-inline.
Bootstrap Inputs4:28
Bootstrap Form Control States3:41
Bootstrap Input Sizing3:11
Bootstrap Carousel9:22
Bootstrap Modal4:01
Create a Bootstrap modal that pops up with a header, body, and footer and fades the background. Activate it via data-toggle and data-target, ensure id matches, and close with data-dismiss.
Bootstrap Tooltip2:12
Bootstrap Popover2:52
Bootstrap Scrollspy5:40
Bootstrap Project - Themes Intro3:31
Bootstrap Project - File Overview2:15
Bootstrap Project - Script Overview8:46
Explore how this bootstrap theme is built with UTF-8, viewport setup, bootstrap CSS, Font Awesome, and Google Fonts, featuring a fixed top navigation and responsive grid with portfolio modals.
Bootstrap Project - Script Overview Cont.7:49
Learn Bootstrap basics by exploring the about us, contact, and footer sections built with container, row, and column grids, including modals, a back-to-top button, and form validation scripts.

Requirements

Basic Computer Skills

Description

Course: Learn Bootstrap - For Beginners
Learn to create mobile-responsive web pages using Bootstrap

Students learn to create the front-end component of mobile-responsive web applications, using the Bootstrap framework.

The techniques explored in this course will ensure your web applications adhere to strict development standards to avoid cross-browser and cross-device compatibility issues.

The course starts with the fundamental concepts, including embedding Bootstrap into web pages. We then explore the Bootstrap Grid system and popular mobile responsive web layouts.

Students will gain a solid understanding of almost every Bootstrap component available, from typography, carousels, panels, drop-down menus, and collapsible nav-bars to forms, popovers, modals and tool tips.

We provide several hands-on exercises to ensure students effectively grasp course material.

What you'll learn - Overview:

Bootstrap Page Structure
Bootstrap Grid System
Bootstrap Layouts
Bootstrap Typography
Styling Images
Bootstrap Tables, Buttons, Badges, & Progress Bars
Bootstrap Pagination
Bootstrap Panels
Bootstrap Menus & Navigation Bars
Bootstrap Carousel & Modals
Bootstrap Scrollspy
Bootstrap Themes

Key Concepts:

Intro to Bootstrap
Embedding Bootstrap
Bootstrap Page Structure
Bootstrap Grid System
Bootstrap Three Column Layouts
Bootstrap Typography
Bootstrap Tables
Bootstrap Styling Images
Bootstrap Jumbotron
Bootstrap Wells
Bootstrap Alerts
Bootstrap Buttons
Bootstrap Button Groups
Bootstrap Justified Button Groups
Bootstrap Glyphicons
Bootstrap Badges and Labels
Bootstrap Progress Bars
Bootstrap Pagination
Bootstrap Pager Pagination
Bootstrap List Groups
Bootstrap Panels
Bootstrap Dropdown Menus
Bootstrap Collapsibles
Bootstrap Collapse Panel
Bootstrap Collapse List Group
Bootstrap Accordian
Bootstrap Tab Menus
Bootstrap Pill Menus
Bootstrap Dynamic Tabs and Pills
Bootstrap Navigation Bar
Bootstrap Collapsible Navigation Bar
Bootstrap Forms - Vertical and Inline
Bootstrap Inputs
Bootstrap Form Control States
Bootstrap Input Sizing
Bootstrap Carousel
Bootstrap Modal
Bootstrap Tooltip
Bootstrap Popover
Bootstrap Scrollspy
Bootstrap Project - Themes Intro
Bootstrap Project - File Overview
Bootstrap Project - Script Overview
Bootstrap Project - Script Overview Cont.

Who this course is for:

Beginner Web Developers who want to Learn Bootstrap