Bootstrap 4 : Building Projects

Name: Bootstrap 4 : Building Projects
Rating: 4.3 (106 reviews)

Learn Bootstrap 4 framework building proffesional responsive website projects

Created byHappy Code

Last updated 3/2017

English

English [Auto],

What you'll learn

Create Proffesional Websites using Bootstrap 4

Course content

4 sections • 33 lectures • 3h 14m total length

Introduction and New Features2:08
What is Bootstrap2:36
Discover how Bootstrap, an open source CSS framework, enables responsive web design with ready components like forms, tables, navigation, and pagination across devices.
Download Adobe Brackets IDE5:39
Download Bootstrap 46:47
Bootstrap First Settings4:51
What's New in Bootstrap 42:57
Discover Bootstrap 4’s major changes, including faster compilation, a flexbox based system, new components like cards and panels, with a single source file and dropped IE8 support.
First Code with Bootstrap 44:07
Create your first bootstrap 4 project by setting up index.html, linking CSS and scripts, and building a simple page with a jumbotron and centered heading.

Bootstrap 4 - Navbar14:42
Create a responsive Bootstrap 4 navbar for an event site, featuring brand, links, collapse toggle, and alignment options, with home, contacts, login, and register items.
Add Search Area to Navbar2:26
Slider First Settings1:41
Design a home page slide by adding an image to the image/slide folder. Paste the CDN script into the index page and edit it before the closing body tag.
Slider - Part110:06
Slider - Part24:51
Build a bootstrap 4 image slider with captions by adding a caption div, caption subtitle, and paragraph text. Duplicate slides and apply button classes to run and test the project.
Working with Title3:36
Create a project title page by building sections and headings in Bootstrap 4, using display-4 and center alignment, and refine heading sizes with small tag styling and content structure.
Working with Text3:44
Working with Text Styles Pro9:29
Learn to style text in Bootstrap 4 using text utilities, captions, and image classes, including alt attributes, figure captions, and responsive, rounded or circular images.
Working With Figures2:33
Duplicate a div to create three categories in a Bootstrap 4 project, update images and names (concert, fayer category, football), and apply a green tag style for the home page.
Adobe Brackets - Emmet HTML Shortcuts6:01
Learn Emmet HTML shortcuts in Adobe Brackets to speed Bootstrap projects by using tab expansions to create divs, classes, lists, and inputs, with dollar sign numbering for multiple items.
Adobe Brackets - Emmet CSS Shortcuts3:37
Review Area HTML Style9:01
Review Area End6:58
Last 3 Blog Post Adding Area8:55
Footer Design8:47
Events List Cover Settings5:09
Create a responsive events list page in Bootstrap 4 using a jumbotron, container, and headings, with links and optional background image for a polished layout.
Responsive Navigation Menu11:28
Build a responsive navigation bar in Bootstrap 4 using collapse and a toggler button. Include a brand, nav items, and a search form with an active state for events.
All Events List9:02
List all events on the page using bootstrap 4 cards, headings, subtitles, and a responsive image deck, showcasing event names like the mantle festival in Amsterdam.
Listing Events with Pagination7:43
Create a paginated events list with Bootstrap 4, using a navigation of page links and list items, including area labels and hidden parameters to manage state and navigation.
Details Page (Part 1)6:24
Details Page (Part 2)10:38
Details Page (Part 3)4:27
Add two event sections: a video area with a YouTube iframe and a map area with a Google Maps iframe, then copy, paste, autoplay, and adjust styles for layout.
Details Page (Part 4)8:53
Develop the details page in Bootstrap 4 by adding a comments area, implementing the media object with media-left and media-body, resizing images, and styling with circle images and hashtag links.
Details Page (Part 5)4:42
Learn to construct a details page with a forum group form using Bootstrap 4 classes like form-group, form-control, textarea, label, and a submit button; verify the page works.

Requirements

Basic HTML and CSS Knowledge
Brackets Text Editor (Not required.We showing how to use Brackets)

Description

_____ This Course is in Growing Progress (Website projects are adding) ____

The Bootstrap 4 : Building Projects course starts with begginer level to the advanced level

Bootstrap 4 is the most comprehensive web development framework. This course will teach you how to create a perfect bootstrap 4 responsive web site. Having a little knowledge of HTML and CSS you can create proffesional web sites with bootstrap 4. Also we teach you how to create amazing mobile-first websites with bootstrap 4. This course is well paced and easy to understand how to do web design.

By the end of this course you will have modern professional websites created with bootstrap 4 that will work on all devices.

All course materials and source codes are downloadable.
Very comprehensive. The intensives also give motivation to complete the course!
It's been really useful for all web designers.
This course is complete and understandable
This course simply explained and easy to follow so far and audio is clean and consistent.
This course is excellent. Well structured. Very good explanations.

Who this course is for:

Who want to make their career on Web Development
Who want to learn more about web development and design
Web Designers and web developers

Bootstrap 4 : Building Projects

What you'll learn

Explore related topics

Course content

First Settings Of Bootstrap 47 lectures • 29min

New Project : Fully Events Website24 lectures • 2hr 45min

Second Projects : App Landing Page - Single Page Application (SPA) (Coming Soon)1 lecture • 1min

Source Codes1 lecture • 1min

Requirements

Description

Who this course is for: