Bootstrap 4 Responsive Web Design and Development
4.4 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,131 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap 4 Responsive Web Design and Development to your Wishlist.

Add to Wishlist

Bootstrap 4 Responsive Web Design and Development

Layout, content, all components, all utilities and 14 templates explained. 70 coding exercises, source code, quizzes...
4.4 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,131 students enrolled
Last updated 8/2017
English
Curiosity Sale
Current price: $10 Original price: $30 Discount: 67% off
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 64 Supplemental Resources
  • 70 Coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Creating fluid and responsive layouts
  • Using breakpoints and the grid system
  • Structuring all kinds of content
  • Building all of the 21 components
  • Using all of the 15 utilities
  • Building 14 different web page templates
  • Accessibility best practices
  • Customizing the default styling
  • Using Google Fonts
  • Adding icons with Font Awesome 4
  • Using JavaScript triggers, options, methods and events
View Curriculum
Requirements
  • Basic understanding of HTML.
  • Text editor
Description

THIS COURSE WILL BE UPDATED TO THE NEW BOOTSTRAP 4 BETA VERSION SOON!

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

This course 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.

This course is for the beginner who want to learn Bootstrap 4 from the bottom up. It goes through all the different parts, but each lecture can be watched independently. In the end you will learn how to make common web page templates and use more advanced features of Bootstrap 4.

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
  • how to use advanced features of Bootstrap 4: customizing the styling, adding icons, using Google Fonts and more


In addition to just learning about the different parts of Bootstrap 4 you will find a detailed walk-through of how to build different responsive, modern and common web page templates, including a 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 video lectures

In addition to the video lectures this course contains the following kinds of learning materials:

  • Coding exercises:
    70 coding exercises
    This is one of the best ways to learn how to code - no downloads or installations required.
  • Quizzes:
    5 quizzes
    In the end of every section you will find a quiz to test your new knowledge.
  • Source files:
    50 HTML source files
    Source files from most of the video lectures free to download and use in your own projects.
  • Interactive CodePens:
    50 direct links to interactive CodePens where you can experiment with all of the features of Bootstrap - no downloads or installations required.


Bootstrap 4 Beta launched August 2017

This course was created when Bootstrap 4 was available in the Alpha 6 version. In August 2017 the first Beta version was released. Some parts of Bootstrap 4 have been changed in the Beta Version, but it's still all the same components and utilities. So this shouldn't stop you from taking this course now.

This course will be updated to match the Beta version (and all future versions of Bootstrap 4), so don't hesitate to enroll if you want the course at a discounted price.

Why this course instead of other Bootstrap courses?

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

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


Upcoming future updates:

Upcoming future updates for this course will include the following features and lectures:

  • "Templates" section expanded: knowledge base, documentation, card gallery, forum overview and more...
  • "Advanced Bootstrap" section expanded: how to implement 3rd party plugins and more...
  • "Assignments": practice your knowledge by doing assignments as part of the course
  • Closed captions for all lectures
Who is the target audience?
  • Anyone who wants to learn how to make responsive and modern websites with Bootstrap 4.
  • Anyone who wants to learn how to make quick prototypes.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
77 Lectures
08:15:21
+
Introduction to Bootstrap
7 Lectures 18:36

A short introduction to the course where I'll briefly answer the following questions:

  • Who is the target audience?
  • What will you learn?
  • What is the teaching style and what are the learning materials?
  • What are the requirements?
  • Which order should you watch the lectures?
Preview 04:59

An overview of what Bootstrap is and what parts it consists of.

What is Bootstrap?
02:10

A brief history of Bootstrap and how it has evolved since the first version released in 2011 and until now.

The history of Bootstrap
01:02

Learn about the official browser and device support and how to find information about the known bugs that exist.

Browser and device support
00:46

If you have already used Bootstrap 3 for a website and want to update it to version 4, you should know about the major changes that have been made.

Migration to Bootstrap 4
02:10

Learn how to download and install Bootstrap 4 to get you up and running and ready to code.

Preview 05:24

An explanation of the basic starter template, which you can download and use in your own projects.

Starter template
02:05

Essential questions about Bootstrap 4

About Bootstrap 4
4 questions
+
Layout
5 Lectures 24:19

In this section we'll learn how to create fluid and responsive layouts with the use of breakpoints, Bootstrap's powerful grid system and more.

Preview 01:00

In this lecture we'll learn how to create containers. Containers are used to limit the width of content and center it in the viewport.

Containers
01:31

Create a container element
1 question

Create a fluid container
1 question


In this lecture we'll learn how to create media objects. The media object is a flexible component for building repetitive patterns where media is positioned alongside content.

Media object
04:38

In this lecture we'll learn how to use the responsive utilities. Show and hide content for specific device sizes with these responsive utility classes.

Responsive utilities
04:21

About layout
4 questions
+
Content
7 Lectures 32:19

In this section we'll learn how to structure all kinds of content, including typography, images, figures, tables and code blocks.

Preview 01:01

In this lecture we'll learn about the Reboot stylesheet, that gives us a consistent and simple baseline to build upon.

Reboot
01:07

In this lecture we'll learn how to use typograhy. We can use some basic styling for headings, paragraphs, blockquotes, lists and more.

Preview 14:03

Normal headings
1 question

Additional headings
1 question

Inline text elements
1 question

Blockquotes
1 question

Lists
1 question

In this lecture we'll learn how to use images. We can make them responsive, apply some styling and align them.

Images
03:38

Images
1 question

In this lecture we'll learn how to use figures. Figures are used when you need to display an image with a related caption.

Figures
01:57

Figures
1 question

In this lecture we'll learn how to use tables. The different styles for this kind of content includes inverted colors, table head styles, striped rows, bordered table, hoverable rows, small table, contextual color classes and responsive table.

Tables
07:10

Tables
1 question

In this lecture we'll learn how to use code. Code can be formatted as either inline code snippets or multiline blocks of code, and specific tags are used for different kinds of code. Large blocks of code can have a max-height and vertical scroll.

Code
03:23

Inline code
1 question

Code blocks
1 question

About content
4 questions
+
Components
22 Lectures 03:09:34

In this section we'll learn how to build all of the 21 components, including buttons, cards, carousels, dropdowns, forms, modals and navigation.

Preview 00:41

In this lecture we'll learn about the alert component. Alerts provide contextural feedback messages for typical user actions.

Preview 06:46

Alert
1 question

Alert with matching link
1 question

Alert with additional content
1 question

Dismissible alert
1 question

In this lecture we'll learn about the badge component. Badges are small and adaptive tags for adding context to different kinds of content.

Badges
03:44

Default badge
1 question

Pill badge
1 question

In this lecture we'll learn about the breadcrumb component. A breadcrumb component is used to indicate the current page's location in a navigational hierarchy.

Breadcrumbs
03:00

Breadcrumb out of nav element
1 question

Breadcrumb out of ordered list
1 question

In this lecture we'll learn about the button component. Buttons are used for actions in forms, dialogs and more. They are available in different variations, in different sizes, with different states, and as either checkboxes or radio buttons.

Buttons
11:13

Buttons
1 question

In this lecture we'll learn about the button group component. Button groups are used to group together a series of buttons on a single line, for example to create a toolbar.

Button group
05:00

Standard button group
1 question

Toolbar with button groups
1 question

Button group variations
1 question

In this lecture we'll learn about the card component. The card component is a flexible content container that includes options for title, subtitle, header, footer, image and various content as well as contextual background colors and various layouts.

Card
11:06

In this lecture we'll learn about the carousel component. The carousel component is used as a slideshow for various kind of content, and it comes with controls, indicators and captions and different options for behavior.

Carousel
11:32

In this lecture we'll learn about the collapse component. The collapse component is used to toggle content on the page.

Collapse
09:22

In this lecture we'll learn about the dropdown component. Dropdowns are contextual overlays that can be toggled to show a list of links.

Preview 08:38

In this lecture we'll learn about forms. Bootstrap offers a variety of form control styles, layout options and custom components for building different kinds of forms.

Forms
25:13

In this lecture we'll learn about input groups. With input groups we can add text, checkboxes, radio buttons, buttons, button groups and dropdowns on either side of text input elements.

Input group
09:43

In this lecture we'll learn about the jumbotron component. The jumbotron is a flexible component that you can use to show for example key marketing messages on your page.

Jumbotron
02:38

Jumbotron
1 question

In this lecture we'll learn about the list group component. This is a flexible component for displaying a series of content as a list.

List group
08:33

Standard list group
1 question

List group variations
1 question

In this lecture we'll learn about the modal component. Modals are flexible dialog prompts, and they come with different options for functionality and styling.

Modal
07:50

In this lecture we'll learn about the nav component. Navs can be styled with tabs and pills and they can have dropdown and pane functionality.

Navs
11:26

In this lecture we'll learn about the navbar component. The navbar component functions as a wrapper that positions branding, navigation and other elements in a responsive header.

Navbar
12:57

In this lecture we'll learn about the pagination component. Pagination links indicate that a series of related content exists across multiple pages. This is useful for long lists of content like search results.

Pagination
06:51

Standard pagination
1 question

Pagination variations
1 question

In this lecture we'll learn about the popover component. With popovers we can add small overlay content to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.

Popovers
11:22

Standard popover
1 question

Popover variations
1 question

In this lecture we'll learn about the progress component. The progress component can be used to display simple and complex progress bars that can be stacked with options for adding labels, stripes and animated stripes.

Preview 05:19

Progress
1 question

In this lecture we'll learn about the scrollspy component. The scrollspy component is used to automatically update navigation targets based on scroll position.

Scrollspy
05:52

Scrollspy
1 question

In this lecture we'll learn about the tooltip component. You can easily add tooltips to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.

Tooltips
10:48

Standard tooltip
1 question

Tooltip variations
1 question

About components
10 questions
+
Utilities
16 Lectures 01:00:20

In this section we'll learn how to use all of the 15 utilities, including easy ways to change color, sizing, spacing and typography.

Preview 00:32

In this lecture we'll learn about the border utilities. With border utilities you can quickly style the border and border-radius of an element. You can for example remove borders and provide different kinds of border-radius for images.

Preview 04:21

Borders
1 question

Border-radius
1 question

In this lecture we'll learn about the clearfix utility. With this utility you can easily clear floats by adding a class to the parent element.

Clearfix
01:57

Clearfix
1 question

In this lecture we'll learn about the close icon. With Bootstrap you can easily create a generic close icon for dismissing content like modals and alerts.

Close icon
01:31

Close icon
1 question

In this lecture we'll learn about the color utilities. Bootstrap provides contextual colors classes for text color, link color and background color.

Preview 03:25

Text color
1 question

Link color
1 question

Background color
1 question

In this lecture we'll learn about the display property utility. You can easily change an element's display property with a simple use of some classes. The display property can be changed to "block", "inline" and "inline-block".

Display property
02:14

Display property
1 question

In this lecture we'll learn about the flexbox utilities. With these you can quickly manage the layout, alignment and sizing of grid columns, navigation, components and more.

Flexbox
13:15

Flexbox container
1 question

Flex direction
1 question

Justify content
1 question

Align items
1 question

Align self
1 question

Flex wrap
1 question

Order
1 question

Align content
1 question

Responsive utility classes
1 question

In this lecture we'll learn about the image replacement utility. We can use the image replacement utility to help replace an element's text content with a background image.

Image replacement
01:11

Image replacement
1 question

In this lecture we'll learn about the invisible content utility. With this utility you can toggle only the visibility of an element, so the display property isn't modified. In this way the element can still affect the flow of the document.

Invisible content
01:08

Invisible content
1 question

In this lecture we'll learn about the position utility. The position utility is helpful for placing elements outside the normal document flow as either fixed or sticky positioned.

Position
02:22

Position
1 question

In this lecture we'll learn about the responsive helper utilities. With these utilities you can preserve the intrinsic aspect ratio for embedded elements – iframes, embeds, videos and objects – and control the floating of individual elements responsively.

Responsive helpers
05:21

Embed basic structure
1 question

Embed with aspect ratio
1 question

Float utilities
1 question

In this lecture we'll learn about the screen reader utility. With this utility you can hide an element in all devices except for screen readers. You can also control if it should show again when gaining focus for example by navigating with a keyboard.

Screen readers
02:11

Screen readers
1 question

Screen readers (and focusable)
1 question

In this lecture we'll learn about the sizing utilities. With sizing utilities you can control the width and height of elements very easily.

Sizing
03:22

Sizing: width
1 question

Sizing: height
1 question

In this lecture we'll learn about the spacing utilities. With spacing utilities you can control the margin and padding of one or more sides of elements across different device sizes.

Spacing
06:10

Spacing
1 question

In this lecture we'll learn about the typography utilities. With typography utilities you can for example align the text, transform the characters and change the font weight and style.

Preview 06:17

Justified text
1 question

Text with no wrap
1 question

Text alignment for all breakpoints
1 question

Text alignment for specific breakpoints and up
1 question

Text transform
1 question

Font weight and style
1 question

In this lecture we'll learn about the vertical alignment utilities. With vertical alignment utilities you can change the alignment of inline elements, including inline-block, inline-table and table cell elements.

Vertical alignment
05:03

Vertical alignment
1 question

About utilities
5 questions
+
Templates
15 Lectures 02:14:04

In this section we'll learn how to build some common web templates that can be used in real websites. We'll use different layout styles and content and use a mix of the different components and utilities.

Preview 00:36

In this lecture we'll learn how to build a photo gallery template. We'll be using a heading, a lead paragraph, pagination components and figures.

Preview 10:19

In this lecture we'll learn how to build a video gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

Video gallery
09:27

In this lecture we'll learn how to build a mixed gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

Mixed gallery
11:50

In this lecture we'll learn how to build an audio gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

Audio gallery
09:03

In this lecture we'll learn how to build a login template. We'll be using a heading element, a full-width jumbotron component with fixed-width content, various form elements and buttons.

Login
07:12

In this lecture we'll learn how to build a contact template. We'll be using various typography elements, form elements, buttons and a responsive embed of Google Maps.

Contact
15:20

In this lecture we'll learn how to build a footer template. We'll be using unordered lists, the dropdown component and various typography elements for headings, address and abbreviations.

Footer
10:44

In this lecture we'll learn how to build a sitemap template. We'll be using heading elements and nested, unordered lists.

Sitemap
07:55

In this lecture we'll learn how to build a shortcuts template. We'll be using the modal component and HTML tags for code content.

Shortcuts
09:14

In this lecture we'll learn how to build an FAQ template. Frequently Asked Questions. We'll be using a heading and an accordion with card components build with the collapse component.

FAQ
06:45

In this lecture we'll learn how to build a thank you template. We'll be using a full-width jumbotron component with fixed-width content.

Thank you
03:29

In this lecture we'll learn how to build an employees template. We'll be using heading elements, images and inline lists.

Employees
06:46

In this lecture we'll learn how to build a pricing table template. We'll be using card components with card headers, card blocks, card text, list groups and card footers as well as contextual color classes.

Pricing table
08:34

In this lecture we'll learn how to build a create account template. We'll be using a full-width jumbotron component with fixed-width content, a lead paragraph, various form elements, buttons and an alert.

Create account
16:50
+
Advanced Bootstrap
4 Lectures 35:38

In this lecture we'll learn how to customize the default Bootstrap 4 styling with SASS. We'll see examples of how to change colors, spacing, breakpoints, border-radius and padding.

Customizing the default styling
11:06

In this lecture we'll learn how to use Google Fonts on our Bootstrap pages. This is a free and quick way to get access to over 800 web fonts hosted by Google.

Using Google Fonts
03:36

In this lecture we'll learn how to add icons to our Bootstrap pages with Font Awesome 4. This is a free and quick way to get access to 675 icons.

Adding icons with Font Awesome 4
10:10

In this lecture we'll learn about JavaScript triggers, options, methods and events used by some of the components in Bootstrap 4. We'll see an example of how to use triggers and options for a popover component and how to use methods and events for a carousel component.

JavaScript triggers, options, methods and events
10:46
+
Extra lectures
1 Lecture 00:31

Thank you for watching this course.

Thank you!
00:31
About the Instructor
Jeppe Schaumburg Jensen
4.4 Average rating
28 Reviews
3,131 Students
1 Course
Front-end developer, interaction designer and musician

Hi there,

My name is Jeppe Schaumburg Jensen and I'm a teacher in topics related to front-end development, interaction design, music and productivity.

Front-end development

I started developing websites for desktop computers in 1999 and in 2000 I started developing my first websites for the mobile web as well.

I have been a graduate teaching assistant in an introductory course about web design and development.

I currently work as a front-end developer at the biggest Danish web agency: Magnetix.

Interaction design

I have a Master of Science in Information Technology with a specialization in Interaction Design and User Experience.

I have worked as a user experience designer at the biggest Danish online webshop: Saxo.

Music

When not working with the web I work as a professional musician, mostly playing the drums in various bands. I also consider myself as an expert in using Ableton Live for live performances, with a lot of experience in how to create and use backing tracks.

Productivity

I have spent many hours to improve my workflow and productivity by reading books about the topic and experimenting with different techniques, tools, software and apps.