Bootstrap 4 for the Developer

Examine Bootstrap and see how this popular open source toolkit makes coding of your responsive apps and web pages easier and more profitable. Save time with a responsive grid system, extensive prebuilt components, and powerful jQuery plugins.
Course info
Rating
(76)
Level
Intermediate
Updated
Jun 20, 2018
Duration
4h 5m
Table of contents
Course Overview
Introduction and Setting up Bootstrap
Graphic Design and Responsive Layout
Bootstrap Navigation
Adding Content with Typography
Buttons
Images, Tables, and Cards
Forms with Bootstrap
Other Bootstrap Components
JavaScript and Bootstrap BFF
Summary
Description
Course info
Rating
(76)
Level
Intermediate
Updated
Jun 20, 2018
Duration
4h 5m
Description

A beautiful app or webpage is just a few easy-to-remember class attributes away; Bootstrap is easy to implement, will save you time, and will help you avoid headaches. In this course, Bootstrap 4 for the Developer, you’ll examine Bootstrap 4 and learn how to use this popular and compelling open source front-end component library. First, you’ll examine how to install Bootstrap – an effortless process that allows for customization via precompiled CSS, Sass variables and mixins, and incredible JavaScript APIs. Next, you’ll explore Bootstrap’s responsive grid system, and how it can help you achieve an appealing layout with minimal effort. You’ll also dive into various other aspects of Bootstrap, including navigation, typography, buttons, images, tables, and forms. Finally, you’ll discover Bootstrap’s extensive prebuilt components and powerful plugins built on jQuery. Even if you’re not a graphic designer, there are plenty of Bootstrap 4 themes to get your app or webpage on its way, and by the end of this course you’ll be able to get started.

About the author
About the author

Mario Macari is an award winning illustrator, animator and graphic designer that fell in love with writing code. He develops and codes for major corporations and teaches coding classes at a couple of colleges in Southeastern Wisconsin. Mario Macari holds a BFA in Illustration and certificates galore from software companies.

More from the author
Making Games in Scratch 2.0
Beginner
3h 14m
Dec 11, 2017
Start Coding with Scratch 2.0
Beginner
3h 6m
Jul 14, 2017
More courses by Mario Duilio Macari
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Mario Macari, and welcome to my course, Bootstrap 4 for the Developer. I'm a graphic designer, coder, college professor, and Pluralsight author. I've been working with graphic design in coding and website creation for a long time, and I have been working with computers for most of my career. I have also been teaching for many of those years. I hope you will enjoy this course and sign up for Pluralsight. com. As a professor, I can tell you Pluralsight. com has some of the best courses out there. In this course we'll learn about Bootstrap 4. One of the most efficient ways to get a good looking website by simply adding classes to the class attribute in your HTML tags. We'll see how easy it is to make responsive websites with nav bars, alerts, modals, jumbotrons, pop-overs, carousels, columns, and rows, and responsive layout. By the end of this course you will have gone through most of the Bootstrap documentation and have tried many of the features. Remember, Bootstrap's the world's most popular front-end component library, and it has amazing layout abilities, content addition techniques, components, and utilities. I hope you'll join me on this journey through Bootstrap. Welcome to Bootstrap 4 for the Developer.

Introduction and Setting up Bootstrap
Hi. This is Mario Macari with Pluralsight, and welcome to the course, Bootstrap 4 for the Developer. In this course we'll learn about the ins and outs of Bootstrap 4, and put this magnificent CSS library to work for you as a developer. Seeing how easy Bootstrap is and seeing responsive websites spring to life will be fun. Instead of creating or typing in all the CSS to get a website to look and be responsive all you need to do with this library is type in a few classes and the class attribute of your HTML tag. In this course we'll learn about Bootstrap 4's many parts. We'll learn about installing Bootstrap from the CDN, have it local, or use install packages. Then we'll explore responsive web page design the Bootstrap way. Next, we'll learn about setting up navigation. After that we'll learn about typography. From there we'll explore buttons. Then it's on to images, tables, and the magic of cards. We discover how easy form are to stylize in Bootstrap. Then we cover the Bootstrap components, such as jumbotrons, carousels, and accordions, and finally, we'll talk about pop-overs, and how JavaScript and Bootstrap are best friends forever. It'll be fun, so let's get started.

Graphic Design and Responsive Layout
In this module we learn about Graphic Design and Responsive Layout. We'll start by talking about the four basic principles of graphic design. Next, we'll discover Bootstrap Background Colors. We'll learn about containers and rows for building responsive layouts. We will add media breakpoints and watch the action. We'll talk about the grid system for multi-column layouts, and then we learn to align and offset those columns. We'll add padding and margins and talk about display options. Finally, we'll see how Bootstrap 4 implements the CSS flexible box module. So let's get started.

Bootstrap Navigation
In this module we'll learn about Bootstrap 4 navbars, breadcrumbs, and pagination. We'll start by adding a pre-coded navbar. Next, we'll learn how to hand-code the navbar to learn how it's done. We'll learn about adding a-r-i-a tags and data-definitions. We'll add a dropdown menu to our navbar. We'll talk about other forms of navigation in Bootstrap 4, pill buttons, tabs, and links. Then we'll go back to our navbar and change the text color and background colors. We'll learn to add a search box form to our navbar and keep it responsive. We'll keep track of our website areas with breadcrumbs. We'll add pagination to the page. Finally, we'll add an animated scroll effect to our navbar. So let's get started.

Adding Content with Typography
In this module we learn about adding content with typography in Bootstrap 4. We'll start by exploring the headline classes. Next, we'll see all of the available built-in Bootstrap for font colors. We'll learn about paragraphs and block quotes. We will discover the inline tags. We'll talk about list making with list groups, and then we'll build an interactive list group with JavaScript. We'll examine responsive floats. Finally, we'll dig into the fixed page items and justify type, so let's get started.

Buttons
In this module we learn about Bootstrap 4 buttons. We'll start by exploring buttons in Bootstrap colors. Next, we'll see the same color set, but this time without line buttons. We'll learn how you can make buttons from other HTML tags. We'll discover button groups. We'll talk about making button groups with dropdown menus, and then we'll build radio and checkbox buttons. We'll examine button toolbars. Next, we'll look at alerts and dismissible alerts. Finally, we'll dig into the Bootstrap badges. So let's get started.

Images, Tables, and Cards
In this module we learn about Bootstrap 4 Images, Tables, and Cards. We'll start by adding the image classes to images. Next, we'll make image figures. We'll learn about adding font awesome icons to our site. We'll learn how to add cards. We'll talk about cards with Bootstrap colors, and then we'll make card decks in groups. We'll learn how to add card columns. We'll discover table classes. We'll use borders. Finally, we'll add media objects for repetitive items on our page. So let's get started.

Forms with Bootstrap
In this module we'll learn about Bootstrap 4 form classes. We'll start by building a plain vanilla HTML form. Next, we'll enhance that form with Bootstrap 4 form classes. We'll learn about adding the form check class to enhance radio buttons and checkboxes. We will discover inline forms. We'll talk about multi-column forms, and then we'll add some validation classes. We'll examine multi-sized fields and adding stuff before or after form fields. Finally, we'll create select menus, add checkboxes and radio buttons, and connect them to fields. So let's get started.

Other Bootstrap Components
In this module we will learn about Bootstrap for Components. We'll start by exploring the jumbotron. Next, we'll build an animated Bootstrap Carousel. We will discover how to make hidden areas on an HTML page, and show them at a touch of a button. Finally, we'll dig in to making a Bootstrap accordion widget, so let's get started.

JavaScript and Bootstrap BFF
In this module we learn about Bootstrap 4 JavaScript and the JavaScript library, jQuery. We'll start by building Tooltips. Next, we'll enhance our web page with pop-up modals. We'll learn about adding popovers. Then we'll discover Scrollspy. Finally, we'll talk about JavaScript events in Bootstrap. So let's get started.

Summary
In this course we learned about Bootstrap 4. We covered a lot of material in a short amount of time, and I hope you enjoyed using Bootstrap 4's amazing frontend component library. You saw the module nature of Bootstrap 4, and hopefully you realize you can quickly build a complicated website simply by using pre-existing code that you can copy and paste from the getbootstraps. com documentation section. I truly enjoyed introducing you to this wonderful library. I challenge you to try your hand at simply mocking up a web page with nothing but Bootstrap. I've done it, and Bootstrap made creating a good looking website quick and easy. So for now, this is Mario, and until next time, thanks for watching, and I hope you enjoy Bootstrap, and that I made learning it easy with my course, Bootstrap 4 for the Developer.