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.
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.
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.
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.
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.
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.