Bootstrap 4 For Everyone

Name: Bootstrap 4 For Everyone
Rating: 4.5 (48 reviews)

Learn The Latest Version Of Bootstrap 4 From Start To Finish And Build 3 Website Projects. Become A FrontEnd Hero Today!

Created byJohn Elder

Last updated 11/2023

English

English [Auto],

What you'll learn

Install and Use the Bootstrap CSS Framework
Understand the Major Bootstrap Components
Understand The Bootstrap Grid System
Use Bootstrap Utilities
Use and Modify The Free Bootstrap Website Themes
Build Amazing Websites Quickly and Easily with Bootstrap

Course content

3 sections • 47 lectures • 4h 13m total length

Introduction3:10
Begin by setting up a text editor, install Bootstrap, and explore Bootstrap 4 components, layouts, rows, columns, and containers for a sample site.
First Things First: How To Get Support Fast!0:09
Check out my student Facebook Group...
It's a great place to get fast support for this course from me, to interact with other students, to post your projects and code, and to access course announcements and extras...
Join Now!
https://www.facebook.com/groups/codemycom/
Website Overview4:02
Install Bootstrap via CDN6:40
Link Bootstrap via a content delivery network by including the css and three javascript files, and use the starter template with the viewport tag and doctype for mobile-first design.
Download and Install Bootstrap Locally7:50
Typography7:21
Explore bootstrap typography by using header tags and h1 variants, display headings, and inline elements like mark, del, em, small, strong, and text alignment.
Code, Images, and Tables8:35
Navbars8:24
Alerts7:38
Learn how to implement Bootstrap alerts, including color variants like warning, dismissible alerts with jQuery, alert links, headings, and sizing options for on-page feedback.
Badges4:53
Explore how Bootstrap badges adapt across headings, text, links, and buttons, with colors like primary and info, resize to fit their parent, and become rounded pills.
Breadcrumbs5:06
Learn how to implement breadcrumbs in Bootstrap 4, using an ordered list with the breadcrumb class and breadcrumb-item elements, including an active non-link item to show the current page.
Buttons6:07
Learn to implement bootstrap 4 buttons with color variants (primary to dark), outline styles, sizes (lg, sm), block level, active and disabled states, and basic button groups.
Cards10:31
Carousel5:59
Collapse4:51
Explore Bootstrap collapse and accordion components, using cards and data toggle collapse with JavaScript to create simple, interactive, collapsible sections.
Dropdowns7:20
Explore bootstrap 4 dropdowns, including the toggle, menu, items, and options like split buttons, alignment, active and disabled states, dividers, offset, and directional placements.
Forms7:38
Explore how Bootstrap 4 forms are built and styled, including form tags, form groups, and form controls, with layouts inside containers and grid systems, plus validation and input groups.
Input Groups1:06
Jumbotrons4:15
Demonstrate how jumbotrons in Bootstrap 4 for everyone create attention-grabbing blocks with lead text, buttons, and dividers, and compare regular versus fluid jumbotrons for responsive layouts.
List Groups4:59
Modals5:19
Navs6:07
Learn how to implement bootstrap navs using nav bars, nav items and links, with active or disabled states, tabs, pills, and dropdowns in horizontal or vertical layouts.
Pagination4:45
Explore Bootstrap 4 pagination by building a nav with class pagination, and using page-item and page-link for previous, next, active, and disabled states. Customize size and alignment with Bootstrap utilities.
Popovers2:34
Learn how to use bootstrap 4 popovers, a simple alternative to modals, by attaching a data-toggle popover with a title and content and controlling placement (top, right, bottom, left).
Progress Bars4:02
Tooltips2:18
Explains how to implement Bootstrap tooltips using the jquery file, assign data placement (top, right, bottom, left), and set the tooltip text via the title attribute on a button.

Containers6:53
Master Bootstrap 4 layout by using containers and the grid system to position content, compare fixed width containers with fluid containers, and understand breakpoints and gutters for responsive design.
Intro To The Grid System4:07
Grid Letter Sizes6:54
Learn how the Bootstrap grid system uses 12 columns, with numbers or letters to size columns, and why numeric sizing offers precise layouts.
No Gutters1:30
Apply no gutters to the Bootstrap row to remove the space between columns, and understand that columns have horizontal padding that creates gutters.
Grid Numbering5:19
In Bootstrap grid numbering, a 12-column grid allows various permutations; use numbers to define relative widths like 2, 4, and 6, with a 30px gutter and fluid percentage widths.
Responsive Breakpoints5:57
Master bootstrap 4 responsive grids by applying mobile-first breakpoints: small, medium, large, extra small, and extra large, using min-width media queries to stack on phones and stay horizontal on desktops.
Grid Alignment5:34
Borders3:38
Colors1:51
Explore bootstrap color utilities by applying text colors such as text-primary and text-secondary, and background colors with bg- utilities; review gradient backgrounds and how links adapt with color classes.
Shadows3:43
Learn how to apply Bootstrap 4 shadow utilities—shadow-sm, shadow, shadow-lg, and shadow-none—and see how padding, borders, and backgrounds affect shadow visibility on elements.
Text Align5:13

Intro To Example Themes4:49
Explore Bootstrap's example section to download, customize, and tinker with cards, pricing pages, product pages, and dashboards, then study the grid, carousel, and sticky footer techniques.
Download Example Themes2:33
Download and extract bootstrap 4.1.3 source code, open the album example via site/docs/4.1/examples, then use the CDN link to replace local bootstrap assets for proper display.
Set Javascript Path4:39
Learn to fix broken menu interactions by correcting relative javascript paths in the album template, navigating to assets and dist folders, and ensuring bootstrap.min.js loads (or fall back to CDN).
Album Example - Adding Images To Cards7:31
Explore how to add images to cards in a Bootstrap 4 album, configure image sources, and tweak image sizes for a polished, responsive grid.
Album Example - Final Customization6:11
Edit the Bootstrap album example by customizing the nav bar, renaming the brand, changing the album title to puppies and sunrises, removing extra buttons, and testing breakpoints on mobile devices.
Cover Example4:42
Add a cover image to the one-page site, modify the custom css file to set a background image, and adjust background-size and positioning to create a responsive cover layout.
Carousel Example 19:36
Create a Bootstrap 4 carousel by customizing 500 by 500 images, headings, and captions, and adjust assets and file paths to ensure a responsive, reusable component.
Carousel Example 24:14
Explore customizing a Bootstrap 4 carousel by ensuring square 1:1 images, adjusting slide headings, and applying left or justified text, while stabilizing button sizes and previewing changes.
Carousel Example 36:43
Build and customize a Bootstrap 4 carousel by updating image sources and captions, adjusting image sizes, and refining navigation and links for mobile previews.
Bonus Lecture10:10

Requirements

No programming skills or special tools are necessary to take this course
You just need a computer with Internet access and a Web Browser
We'll Download a Free Coding Text Editor Called Sublime Text
We'll Download Bootstrap For Free As Well
Knowledge Of HTML Would Be Useful but not Necessary
You Don't Need To Know CSS To Take This Course

Description

There's a reason why Bootstrap is the MOST popular CSS Framework in the world, used by millions of websites all over the world!

The reason...it's easy!

Bootstrap 4 allows you to build amazing looking websites quickly and easily, sometimes as easy as drag and drop!

HTML and CSS are the fundamental building block of the Internet. Using a frontend web framework like Bootstrap can cut your web development time down drastically!

In this course I'll show you how to use Bootstrap 4.1.1 from start to finish. You don't need any special skills or knowledge to start building great looking websites in minutes.

We'll start out learning how to install and start using Bootstrap. Then we'll learn about all of the Bootstrap Components. After that we'll learn how to position things on a webpage using the Bootstrap grid system. Then we'll learn how to use the Bootstrap Utilities.

Finally, we'll build three websites using free templates that come with bootstrap. The first is a cool photo album website, the second is a simple one page landing page site, and the last one is a cool blog/business website template.

Aimed at the absolute beginner, this course is great for front end developers, back end developers, or even just hobbyists who want to learn to build cool websites!

See you inside!

-John Elder

CEO Codemy. com

Who this course is for:

This course is built for absolute beginners who want to learn to build websites with Bootstrap
Front End Developers Who Want To Learn Bootstrap
Back End Developers Who Want To Learn Bootstrap
Anyone Who Wants To Learn Bootstrap 4

Bootstrap 4 For Everyone

What you'll learn

Explore related topics

Course content

Bootstrap Components26 lectures • 2hr 22min

The Grid System and Utilities11 lectures • 51min

Example Themes and Projects10 lectures • 1hr 1min

Requirements

Description

Who this course is for: