Styling the Web with Bootstrap

Paths

Styling the Web with Bootstrap

Authors: Gill Cleeren, Shawn Wildermuth, Emmanuel Henri, Jill Gundersen, Jeff Batt

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates for... Read more

What You Will Learn

  • Designing layouts with Bootstrap grid
  • Typography and utilities
  • Implementing basic components
  • Adding interactivity with JavaScript components

Pre-requisites

  • HTML
  • CSS

Styling the Web with Bootstrap

In this path you will learn how to design and style mobile-friendly, responsive layouts with Bootstrap grid, components, forms, typography, and utilities.

Bootstrap: Getting Started

by Gill Cleeren

Jul 30, 2020 / 2h 8m

2h 8m

Start Course
Description

Bootstrap is a vital tool in the toolbox of just about every web developer. It is key to creating responsive, mobile-first websites. In this course, Bootstrap Getting Started, you’ll learn to use the Bootstrap framework in a practical, hands-on way. First, you’ll explore the key parts of the Bootstrap framework so you understand what Bootstrap can help you achieve. Next, you’ll discover how to create a responsive layout, based on the Grid and other Bootstrap classes. Finally, you’ll learn how to add components to enhance the experience users will have on your site. When you’re finished with this course, you’ll have the skills and knowledge of Bootstrap needed to build modern, mobile-first web sites.

Table of contents
  1. Course Overview
  2. Getting to Know Bootstrap
  3. Creating a Page Layout with Bootstrap
  4. Adding Style with Bootstrap
  5. Bringing in Functionality Using Bootstrap Components
  6. Creating a Bootstrap-enabled Form
  7. Making Pages Interactive with JavaScript-enabled Components

Creating a Responsive Layout with Bootstrap Grid

by Shawn Wildermuth

Aug 19, 2020 / 1h 28m

1h 28m

Start Course
Description

Structuring websites to work on any device can be a tough task for many web developers. In this course, Creating a Responsive Layout with Bootstrap Grid, you’ll gain the ability to build responsive websites. First, you’ll explore using Bootstrap’s grid system. Next, you’ll discover responsively using the grid and other utilities from Bootstrap. Finally, you’ll learn how to use Flexbox to be creative about how you build interesting and usable layouts within the Grid System. When you’re finished with this course, you’ll have the skills and knowledge of responsive web development using Bootstrap needed to build accessible, attractive websites.

Table of contents
  1. Course Overview
  2. Getting Started with the Grid System
  3. Applying Responsive Techniques
  4. Advanced Layout with the Flexbox

Adding Styling with Bootstrap Typography and Utilities

by Emmanuel Henri

Nov 6, 2020 / 48m

48m

Start Course
Description

A site without much thought of typography looks unprofessional and amateur. In this course, Adding Styling with Bootstrap Typography and Utilities, you’ll learn to work with Bootstrap's typography tools. First, you’ll explore the fundamentals of fonts and resources to help you select the right ones. Next, you’ll discover Bootstrap’s typography settings and how to apply them. Finally, you’ll learn how to use the text utilities in Bootstrap. When you’re finished with this course, you’ll have the skills and knowledge of Bootstrap’s typography needed to produce professional websites with beautiful styles.

Table of contents
  1. Course Overview
  2. Exploring Typography Fundamentals
  3. Working with Bootstrap's Typography Settings
  4. Working with Bootstrap's Text Utilities

Bootstrap Components: Playbook

by Jill Gundersen

Sep 24, 2020 / 1h 34m

1h 34m

Start Course
Description

Bootstrap has many components that can be overwhelming to learn and understand. In this course, Bootstrap Components: Playbook, you’ll learn to understand and utilize the Bootstrap components to create a web site with a streamlined appearance in a timely manner. First, you’ll explore general class styles to add color and enhancements to buttons, and unordered lists. Next, you’ll discover site wide components such as navigation, pagination, and breadcrumbs. Finally, you’ll learn how to layout modules of information with the card component. When you’re finished with this course, you’ll have the skills and knowledge of Bootstrap components needed to produce a visually appealing site in minimal time.

Table of contents
  1. Course Overview
  2. Before You Start
  3. Color
  4. Button and Button Group
  5. Badge
  6. List Group
  7. Forms
  8. Alert
  9. Jumbotron
  10. Nav and Navbar
  11. Breadcrumb
  12. Pagination
  13. Progress
  14. Card

Creating Interactivity with JavaScript Based Bootstrap Components

by Jeff Batt

Sep 1, 2020 / 2h 39m

2h 39m

Start Course
Description

Static Bootstrap components are fantastic, but they do not engage the end-user. What if you needed to engage your user by customizing or extending components? In this course, Creating Interactivity with JavaScript Based Bootstrap Components, you’ll learn to create and extend JavaScript enabled components using various options, methods, and events. First, you’ll explore how to show additional content when a learner clicks on a button. Next, you’ll discover how to message and alert the user through popovers, toasts, and more. After that, you’ll explore how to present content in various engaging ways like carousels and ScrollSpy. Finally, you’ll learn how to present additional interactivity inside modals, which extends the content you can have on a page. When you’re finished with this course, you’ll have the skills and knowledge of working with more interactive components available in Bootstrap needed to make your web pages more engaging for your end-users.

Table of contents
  1. Course Overview
  2. Getting Started with Javascript-based Components
  3. Exploring Bootstrap Message Components
  4. Displaying Content with Collapse, Carousel, and ScrollSpy
  5. Understanding the Modal Component
Offer Code *
Email * First name * Last name *
Company
Title
Phone
Country *

* Required field

Opt in for the latest promotions and events. You may unsubscribe at any time. Privacy Policy

By providing my phone number to Pluralsight and toggling this feature on, I agree and acknowledge that Pluralsight may use that number to contact me for marketing purposes, including using autodialed or pre-recorded calls and text messages. I understand that consent is not required as a condition of purchase from Pluralsight.

By activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit