3.78 out of 5
3.78
626 reviews on Udemy

Learn Bootstrap 4 Responsive Web Development

Learn how to create responsive websites using Bootstrap
Instructor:
Frahaan Hussain
55,069 students enrolled
English [Auto]
Create responsive websites
Use Bootstrap to construct modern website
Advanced web development
Ability to create visually appealing website
Create cross platform websites

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.

Over 205,000 students have enrolled on my courses and all of them are extremely satisfied. You will also be satisfied with this course. If you do not like the course, remember that within 30 days you can request a full refundI guarantee you satisfaction.

If you have any questions regarding the topics covered in this course, please feel free to ask. I’m always happy to help those who want to learn.

To summarise this is what you get:

• Lifetime access to HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• All videos are downloadable. Learn wherever you want, even without an internet connection!

• Downloadable starter code and final code for each section.

• Free helpful support in the course Q&A when you have questions or get stuck.

• Multiple coding challenges to practice your new skills (solutions included).

Sounds great? Then start this adventure today by clicking the “Take this course” button, and join me in the only course that you will need!

Intro

1
Introduction To This Bootstrap Course

Introduction to the course.

2
Setting Up A Project

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

3
[Bootstrap API Guide] Setup

Bootstrap API Guide Setup Link

https://v4-alpha.getbootstrap.com/getting-started/

Grid System

1
Introduction To The Grid System

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.

2
[Bootstrap API Guide] Grid

Bootstrap API Guide Grid Link

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

3
More Grid Sizes

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)
4
Varying Grid Sizes

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

5
Offsetting Columns

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

6
Multiple Rows

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

7
Nesting Columns

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

8
Ordering Columns

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

9
[Quiz] Grid System

Test your knowledge on the famous Bootstrap Grid System.

Media Objects

1
Introduction To Media Objects

Learn how to add media objects to your website.

2
[Bootstrap API Guide] Media Object

Bootstrap API Guide Media Object Link

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

3
Nesting Media Objects

Learn how to nest media objects into different components.

4
Media Object Alignment

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

5
[Quiz] Media Objects

Test your knowledge on Media Objects.

Buttons

1
Introduction To Buttons

Now lets learn about the basics of buttons in Bootstrap.

2
[Bootstrap API Guide] Buttons

Bootstrap API Guide Buttons Link

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

3
Button Groups

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

4
Checkbox Buttons

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.

5
Radio Buttons

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.

6
Button Dropdown

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

7
[Quiz] Buttons

Test your knowledge on buttons.

Cool Bootstrap Features

1
Input Groups

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

2
[Bootstrap API Guide] Input Groups

Bootstrap API Guide Input Groups Link

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

3
Jumbotron

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

4
[Bootstrap API Guide] Jumbotron

Bootstrap API Guide Jumbotron Link

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

5
Labels

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

6
Alerts

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

7
[Bootstrap API Guide] Alerts

Bootstrap API Guide Alerts Link

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

8
[Quiz] Cool Features

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

Cards

1
Introduction To Cards

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.

2
[Bootstrap API Guide] Cards

Bootstrap API Guide Cards Link

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

3
More Card Content Types

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

4
Card Text Alignment

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

5
Cards Header & Footer

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

6
Card Image Caps

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

7
Card Image Overlay

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

8
Inverting Cards

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.

9
Card Background Variants

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.

10
Card Groups

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.

11
Card Decks

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

12
Card Columns

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.

13
[Quiz] Cards

How much do you know about card?

Navigation

1
[Bootstrap API Guide] Navigation

Bootstrap API Guide Navigation Link

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

2
Base Nav

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.

3
Nav Tab & Pills

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.

4
Nav Dropdowns

Learn how to implement a dropdown to improve navigation.

5
Nav Tab Panes

Learn about nav tab panes.

6
[Bootstrap API Guide] Navigation Bar

Bootstrap API Guide Navigation Bar Link

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

7
Navbar

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

8
Navbar Color Schemes

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

9
Navbar Placement

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

10
Navbar Collapsible Content

Learn how to make our navigation bar collapsible.

11
Responsive Navbar

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

12
[Quiz] Navigation

Let's navigate your skillset :D

Extras

1
Breadcrumb

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

    2
    Pagination

    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.

    3
    Pager

    Learn about Pager navigation in Bootstrap.

    4
    Progress

    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.

    5
    List Groups

    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.

    6
    Advanced List Groups

    Let's up our list group game.

    7
    Modals

    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.

    8
    Tooltips

    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.

    9
    Popovers

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

    10
    Collapse

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

    11
    Accordion Collapse

    Extend the default collapse behaviour to create an accordion.

    12
    Carousel

    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.

    13
    [Quiz] Extras

    See if you know the extra parts of Bootstrap.

    Bonus Lecture: Discounted Courses

    1
    Bonus Lecture: Discounted Courses

    Thanks a lot for enrolling in this course, as a way of saying thank you, I am giving you access to my other classes on (web development) at a steep discount! Hope you enjoy them.

    You can view and review the lecture materials indefinitely, like an on-demand channel.
    Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
    3.8
    3.8 out of 5
    626 Ratings

    Detailed Rating

    Stars 5
    240
    Stars 4
    211
    Stars 3
    120
    Stars 2
    34
    Stars 1
    21
    affd6740a66c236ab649e49274946fe0
    30-Day Money-Back Guarantee

    Includes

    5 hours on-demand video
    11 articles
    Full lifetime access
    Access on mobile and TV
    Certificate of Completion