Learn Bootstrap 4 Responsive Web Development
4.2 (57 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.
11,629 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

Learn Bootstrap 4 Responsive Web Development

Learn how to create responsive websites using Bootstrap
4.2 (57 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.
11,629 students enrolled
Created by Frahaan Hussain
Last updated 8/2017
English
English [Auto-generated]
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 10 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create responsive websites
  • Use Bootstrap to construct modern website
  • Advanced web development
  • Ability to create visually appealing website
  • Create cross platform websites
View Curriculum
Requirements
  • Understand the fundamentals of HTML programming
  • Basic mechanics of web development
  • Understand the fundamentals of CSS programming
  • Understand the fundamentals of JavaScript programming
  • Passion for web development
Description

Learn about the fundamentals that make the awesome websites we use on a daily basis. Using devices from mobile phones to tablets to desktop computers. A step by step process is used to show everything from setting up to essential Bootstrap and responsive design features.

Gain a good understanding of the following concepts:

  1. Bootstrap 4
  2. Responsive web design
  3. Web development
  4. Cross platform web design
  5. Responsive web components

Bootstrap is the most popular responsive web framework in the world, most modern websites use Bootstrap.

You will be provided with the full source code to aid in development during and after this course. The source code is free to use in as many projects as you wish.

Who is the target audience?
  • Anyone looking to create websites
  • Beginners looking to learn the fundamentals of responsive design
  • Beginners looking to learn the fundamentals of Bootstrap
  • Anyone looking for a quick reference/reminder to Bootstrap
Compare to Other Responsive Design Courses
Curriculum For This Course
63 Lectures
04:39:20
+
Intro
3 Lectures 08:57

Introduction to the course.

Preview 04:11

We will walk through the process of setting up Bootstrap 4 to create websites.

Preview 04:44

Bootstrap API Guide Setup Link

https://v4-alpha.getbootstrap.com/getting-started/
Preview 00:02
+
Grid System
8 Lectures 45:19

Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range.

Preview 06:17

Bootstrap API Guide Grid Link

https://v4-alpha.getbootstrap.com/layout/grid

[Bootstrap API Guide] Grid
00:02

Learn more about the different grid sizes that make up the following layouts:

  • Extra Small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra Large (xl)
More Grid Sizes
08:14

Learn how to use varying grid sizes to create better and more responsive websites.

Varying Grid Sizes
09:45

Learn how to move columns to position content where you would like on your website.

Offsetting Columns
05:15

Learn how to incorporate more than one row into your website.

Multiple Rows
03:11

We will now learn about how you can nest columns to create even finer tweaking on your website to position and size content dynamically.

Nesting Columns
07:53

Learn how to rearrange columns to optimally position content for the most immersive user experience.

Ordering Columns
04:42

Test your knowledge on the famous Bootstrap Grid System.

[Quiz] Grid System
5 questions
+
Media Objects
4 Lectures 11:14

Learn how to add media objects to your website.

Introduction To Media Objects
05:55

Bootstrap API Guide Media Object Link

https://v4-alpha.getbootstrap.com/layout/media-object

[Bootstrap API Guide] Media Object
00:02

Learn how to nest media objects into different components.

Nesting Media Objects
03:23

Now we will cover how to precisely position media objects on our website.

Media Object Alignment
01:54

Test your knowledge on Media Objects.

[Quiz] Media Objects
3 questions
+
Buttons
6 Lectures 37:03

Now lets learn about the basics of buttons in Bootstrap.

Preview 10:13

Bootstrap API Guide Buttons Link

https://v4-alpha.getbootstrap.com/components/buttons/

[Bootstrap API Guide] Buttons
00:02

Group a series of buttons together on a single line with the button group.

Button Groups
05:18

checkbox (check boxtickboxtick box) is a GUI widget that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'no' (not checked) on a simple yes/no question.

Checkbox Buttons
05:11

radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.

Radio Buttons
06:20

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

Button Dropdown
09:59

Test your knowledge on buttons.

[Quiz] Buttons
3 questions
+
Cool Bootstrap Features
7 Lectures 21:32

Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.

Input Groups
04:47

Bootstrap API Guide Input Groups Link

https://v4-alpha.getbootstrap.com/components/input-group

[Bootstrap API Guide] Input Groups
00:02

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site

Preview 04:39

Bootstrap API Guide Jumbotron Link

https://v4-alpha.getbootstrap.com/components/jumbotron

[Bootstrap API Guide] Jumbotron
00:02

Labels provide a means for adding simple yet useful information to your website.

Preview 05:41

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts
06:18

Bootstrap API Guide Alerts Link

https://v4-alpha.getbootstrap.com/components/alerts/

[Bootstrap API Guide] Alerts
00:02

Let's see how your knowledge is on the cool Bootstrap features.

[Quiz] Cool Features
3 questions
+
Cards
12 Lectures 33:27

card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Introduction To Cards
05:51

Bootstrap API Guide Cards Link

https://v4-alpha.getbootstrap.com/components/card

[Bootstrap API Guide] Cards
00:02

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported

Preview 02:55

You can quickly change the text alignment of any card in its entirety or specific parts with text align classes.

Card Text Alignment
02:22

Add an optional header and/or footer to enhance the cards.

Cards Header & Footer
03:14

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card

Preview 02:00

Turn an image into a card background and overlay your card’s text.

Card Image Overlay
01:29

By default, cards use dark text and assume a light background. You can reverse that by toggling the color of text within, as well as that of the card’s subcomponents, with .card-inverse. Then, specify a dark background-color and border-color to go with it.

Inverting Cards
02:52

Cards include their own variant classes for quickly changing the background-color and border-color of a card. Darker colors require the use of .card-inverse.

Card Background Variants
03:10

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Card Groups
02:14

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Preview 02:42

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Card Columns
04:36

How much do you know about card?

[Quiz] Cards
4 questions
+
Navigation
11 Lectures 41:46

Bootstrap API Guide Navigation Link

https://v4-alpha.getbootstrap.com/components/navs/

[Bootstrap API Guide] Navigation
00:02

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. No active states are included in the base nav.

Base Nav
02:56

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tubbable regions with our tab JavaScript plugin.

Nav Tab & Pills
03:45

Learn how to implement a dropdown to improve navigation.

Nav Dropdowns
04:55

Learn about nav tab panes.

Nav Tab Panes
07:19

Bootstrap API Guide Navigation Bar Link

https://v4-alpha.getbootstrap.com/components/navbar/

[Bootstrap API Guide] Navigation Bar
00:02

The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. It’s easily extensible and, thanks to our Collapse plugin, can easily integrate responsive behaviours

Preview 07:15

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-inverse for dark background colors. Then, customize with .bg-* utilities

Navbar Color Schemes
03:22

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. Note that position: sticky, used for .sticky-top, isn’t fully supported in every browser

Navbar Placement
03:32

Learn how to make our navigation bar collapsible.

Navbar Collapsible Content
03:56

Now lets make our navbar responsive to support all devices including mobile.

Responsive Navbar
04:42

Let's navigate your skillset :D

[Quiz] Navigation
2 questions
+
Extras
12 Lectures 01:20:07

Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content

    Breadcrumb
    03:46

    Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes.

    Pagination
    06:33

    Learn about Pager navigation in Bootstrap.

    Pager
    03:41

    Use our custom progress component for displaying simple or complex progress bars. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

    Preview 06:51

    List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class.

    List Groups
    04:28

    Let's up our list group game.

    Advanced List Groups
    06:25

    Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.

    Modals
    12:58

    Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.

    Tooltips
    06:03

    Add small overlay content, like those found in iOS, to any element for housing secondary information

    Popovers
    06:37

    The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript.

    Preview 03:48

    Extend the default collapse behaviour to create an accordion.

    Accordion Collapse
    09:14

    The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

    Carousel
    09:43

    See if you know the extra parts of Bootstrap.

    [Quiz] Extras
    3 questions
    About the Instructor
    Frahaan Hussain
    4.1 Average rating
    504 Reviews
    44,671 Students
    11 Courses
    CEO and Lead Developer at Sonar Systems

    I am CEO of Sonar Systems which is the world leader in educational material for the game engine Cocos2d-x, one of the best and most popular game engines in the world. With years of experience programming and running an online education platform (Sonar Learning) I can help and support new programming like you.

    I am also a University Lecturer teaching a variety of topics in Games Programming from Games Design to OpenGL Shader Programming.

    I am also a published author of games design and soon to be released Responsive Web Design. I have all the facets required to educate and inspire.