Bootstrap 4 Responsive Web Design and Development

Jeppe Schaumburg Jensen, Front-end developer and digital designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
76 Videos (8h 6m)
    • Introduction: About the course

      3:44
    • Introduction: What is bootstrap

      2:10
    • Introduction: The history of Bootstrap

      1:02
    • Introduction: Browser device support

      0:46
    • Introduction: Migration

      2:10
    • Introduction: Downloading and installing Bootstrap

      5:24
    • Introduction: Starter template

      2:05
    • Layout: About the layout section

      1:00
    • Layout: Containers

      1:31
    • Layout: Grid system and breakpoints

      12:49
    • Layout: Media object

      4:38
    • Layout: Responsive utilities

      4:21
    • Content: About the content section

      1:01
    • Content: Reboot

      1:07
    • Content: Typography

      6:17
    • Content: Images

      3:38
    • Content: Figures

      1:57
    • Content: Tables

      7:10
    • Content: Code

      3:23
    • Components: About the components section

      0:41
    • Components: Alerts

      6:46
    • Components: Badges

      3:44
    • Components: Breadcrumb

      3:00
    • Components: Buttons

      11:13
    • Components: Button group

      5:00
    • Components: Card

      11:06
    • Components: Carousel

      11:32
    • Components: Collapse

      9:22
    • Components: Dropdowns

      8:38
    • Components: Forms

      25:13
    • Components: Input group

      9:43
    • Components: Jumbotron

      2:38
    • Components: List group

      8:33
    • Components: Modal

      7:50
    • Components: Navs

      11:26
    • Components: Navbar

      12:57
    • Components: Pagination

      6:51
    • Components: Popovers

      11:22
    • Components: Progress

      5:19
    • Components: Scrollspy

      5:52
    • Components: Tooltips

      10:48
    • Utilities: About the utilities section

      0:32
    • Utilities: Borders

      4:21
    • Utilities: Clearfix

      1:57
    • Utilities: Close icon

      1:31
    • Utilities: Colors

      3:25
    • Utilities: Display property

      2:14
    • Utilities: Flexbox

      13:15
    • Utilities: Image replacement

      1:11
    • Utilities: Invisible content

      1:08
    • Utilities: Position

      2:22
    • Utilities: Responsive helpers

      5:21
    • Utilities: Screen readers

      2:11
    • Utilities: Sizing

      3:22
    • Utilities: Spacing

      6:10
    • Utilities: Typography

      6:17
    • Utilities: Vertical alignment

      5:03
    • Templates: About the templates section

      0:36
    • Templates: Photo gallery

      10:19
    • Templates: Video gallery

      9:27
    • Templates: Mixed gallery

      11:50
    • Templates: Audio gallery

      9:03
    • Templates: Login

      7:12
    • Templates: Contact

      15:20
    • Templates: Footer

      10:44
    • Templates: Sitemap

      7:55
    • Templates: Shortcuts

      9:14
    • Templates: Faq

      6:45
    • Templates: Thank you

      3:29
    • Templates: Employees

      6:46
    • Templates: Pricing table

      8:34
    • Templates: Create account

      16:50
    • Advanced Bootstrap: Customizing the default styling

      11:06
    • Advanced Bootstrap: Using Google Fonts

      3:36
    • Advanced Bootstrap: Adding icons with Font Awesome 4

      10:10
    • Advanced Bootstrap: JavaScript triggers, options, methods and events

      10:46

About This Class

Bootstrap - the world's most popular front-end framework!

This class covers all important aspects of the latest version of the world's most popular front-end framework, Bootstrap. Bootstrap has been used by thousands of people around the world and have been carefully developed to cover a wide range of typical user interfaces.

Web pages built with Bootstrap 4 works across all kinds of devices, browsers and screen sizes while also taking care of accessibility and a clean and modern design.

Layout, content, components and utilities of Bootstrap 4

This course covers all the following aspects of Bootstrap 4:

  • how to create fluid and responsive layouts with the use of breakpoints, Bootstrap's powerful grid system and more
  • how to structure all kinds of content, including typography, images, figures, tables and code blocks
  • how to build all of the 21 components, including buttons, cards, carousels, dropdowns, forms, modals and navigation
  • how to use all of the 15 utilities, including easy ways to change color, sizing, spacing and typography
  • how to build 14 responsive, modern and common web page templates with Bootstrap 4

In addition to just learning about the different parts of Bootstrap 4 you will find a detailed walk-through of how to build several responsive, modern and common web page templates: photo gallery, video gallery, mixed gallery, audio gallery, login, contact, footer, sitemap, shortcuts, FAQ, thank you, employees, pricing table and create account.

More than just videos

In addition to the class videos this course contains 60+ direct links to interactive CodePens where you can experiment with all of the features of Bootstrap - no downloads or installations required.

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 is currently available in an alpha 6 version, meaning that the official Bootstrap 4 is not yet released in a stable and finalized version. But this shouldn't stop you from using it anyway. Many parts of Bootstrap 3 have been improved in version 4, and it also features many new and modern components.

This class will be updated if new components, utilities or other features are added to Bootstrap 4 in the beta or final version, or if new important information is added to the official Bootstrap 4 documentation.

Why this class instead of other Bootstrap classes?

Wondering why you should choose this class instead of other Bootstrap classes? This class has the following features that makes it stand out among the rest:

  • up to date with the latest version of Bootstrap 4 (alpha 6) from 2017
  • most features and extra learning materials including source files and interactive CodePens
  • highest number of class videos and the highest total minutes of video covering Bootstrap 4
  • all class videos can be watched independently of each other
  • has been carefully crafted through 200 hours of dedicated work

Who is the target audience?

This class is for everyone with basic HTML skills who want to learn how to quickly make responsive and modern websites with the most popular front-end framework, Bootstrap.

Upcoming future updates

Upcoming future updates will include the following features and class videos:

  • more templates
  • various extra lectures including how to use icon fonts, how to use web fonts, how to implement 3rd party plugins and how to customize Bootstrap with SASS

Disclaimer

At the end of each class video I'm referring to coding exercises, but these are unfortunately not supported on the Skillshare platform.

22

Students

--

Projects

Jeppe Schaumburg Jensen

Front-end developer and digital designer