Bootstrap 4 Quick Start: Code Modern Responsive Websites

Learn the new features of Bootstrap 4, and code three responsive websites.

Created byBrad Hussey

Last updated 5/2018

English

English [Auto],

What you'll learn

Code responsive websites in Bootstrap 4
Understand how to use the new features in Bootstrap 4
Modify old Bootstrap 3 websites to work best in Bootstrap 4
Set up an efficient website project workflow
Install & compile SASS for Bootstrap projects
Build a modern startup landing page

Course content

5 sections • 18 lectures • 3h 58m total length

What's New in Bootstrap 4?4:17
Discover what's new in Bootstrap 4, including rem-based grid, flex support, and cards. Learn about alpha status and the new variables file while preparing three projects.
[Updated for 2018] What's New in Bootstrap 4.x.x?8:32
explains the major changes in bootstrap 4, including a flexbox grid, from less to sass, rem units, reboot, and the removal of panels, thumbnails, wells, and glyphicons.
How to Download & Install Bootstrap 410:59
Learn how to download and install Bootstrap 4 alpha, using CDN, downloading source files, or via package managers like Bower, to get CSS and JavaScript up and running.
[Updated for 2018] How to Download & Install Bootstrap 4.x.x9:22
Download bootstrap 4.x.x via compiled assets, source files, or CDN, and install with npm, Ruby gems, or NuGet, or by cloning the repository for the latest release.
Final Projects Walk Through + Download Course Files2:57
Walk through three Bootstrap 4 projects, coding a basic site with cards and a masonry layout, building band and startup sites, using a downloadable Bootstrap template and final course files.

Code a Responsive Website (Part 1)19:17
Code a responsive Bootstrap layout featuring a full-viewport cover with centered content, an opt-in box, and a navigation bar. Use Brackets and Emmet, link Bootstrap, and test across viewports.
Code a Responsive Website (Part 2)20:33
Code a responsive website (part 2) by implementing a full-width Bootstrap carousel with captions and indicators, then building a uniform-height card section using card groups.
Code a Responsive Website (Part 3)20:16
Code a responsive bootstrap 4 website by building the about section with padding and a masonry-style latest news layout using card columns, images, and a footer.
[Updated for 2018] How to Update Project #1 to Bootstrap 4.x.x20:37
Update a Bootstrap project to Bootstrap 4.x using CDN, remove bower, and convert HTML and classes for navbars, carousels, cards, and forms to Bootstrap 4 syntax for a responsive site.

Code a Landing Page with a Bootstrap Template13:53
Code a responsive landing page quickly by adapting a Bootstrap template, using the album example, building a navbar, hero, cards, and a footer, and tweaking CSS for contrast and layout.
[Updated for 2018] How to Update Project #2 to Bootstrap 4.x.x9:00
Update a band website to bootstrap 4.1.1 via CDN, replacing old classes for stability and modernizing the navbar, jumbotron, and footer for responsive design.

Code a Startup Landing Page (Part 1)16:04
Code a startup landing page with bootstrap, featuring a responsive navbar, a full-width stage with slogan and call to action, two-column features with image and text, and a sign-in button.
Code a Startup Landing Page (Part 2)11:39
Build a responsive Bootstrap startup landing page by coding feature sections, embedding a YouTube video, and using a dark feature block with responsive flexbox centering across breakpoints.
Code a Startup Landing Page (Part 3)20:55
Code a Bootstrap startup landing page with multiple feature sections, grid layouts, and responsive images. Apply styling tweaks and a footer, then preview the SAS workflow in the next lesson.
[Updated for 2018] How to Update Project #3 to Bootstrap 4.x.x17:22
Learn how to update a Bootstrap 3 starter page to Bootstrap 4.x.x, updating CDN links, renaming classes, and adjusting the navbar, layout, and display utilities.

How to Install & Compile Sass15:39
Install and compile Sass, learn about variables, nesting, and partials, and use command line or GUI tools like CodeKit to watch directories and compile Bootstrap Sass.
Professional Sass Organization & Workflow15:40
Master a professional sass workflow for bootstrap sites by organizing base, typography, and components; selectively import bootstrap files, override variables, and live-compile with sass watch.
Wrap Up & What's Next?1:11
Wrap up with next steps in Bootstrap and responsive design; invite viewers to subscribe to YouTube and blog, share with friends, and access free resources to become a professional freelancer.

Requirements

HTML & CSS
Basic understanding of Bootstrap 3

Description

Want to learn how to quickly build beautiful responsive websites for free?

Twitter Bootstrap has become the most widely used framework for quickly building responsive websites, and they're currently launching Bootstrap 4 to the public. This new version of Bootstrap comes with a ton of new features to help you build even better responsive websites.

In this course we will learn:

all about the new features in Bootstrap 4
what's different in Bootstrap 4 vs. Bootstrap 3
how to set up an efficient workflow for Bootstrap projects
how to build 3 separate responsive websites, including a modern startup landing page
how to download & install SASS for Bootstrap websites
and more!

You have nothing to lose by enrolling in the course because — well, it's free! The high quality of content & production in this course will rival other paid Bootstrap 4 courses, so don't waste your time and let's get started!

Enroll now!

Who this course is for:

Designers & developers who want to learn the new version of Bootstrap
Anyone who wants to learn how to use SASS in a Bootstrap project
Entrepreneurs & business owners wanting to learn to build mobile sites

Bootstrap 4 Quick Start: Code Modern Responsive Websites

What you'll learn

Explore related topics

Course content

Getting Started with Bootstrap 45 lectures • 36min

Project #1: Hand Code a Basic Website4 lectures • 1hr 21min

Project #2: Use a Bootstrap Template2 lectures • 23min

Project #3: Modern Startup Landing Page4 lectures • 1hr 6min

Advanced Techniques: Using Sass in Your Project3 lectures • 33min

Requirements

Description

Who this course is for: