Bootstrap 3

Building great looking websites that work well with different sized devices can be a challenge. Twitter's Bootstrap 3 can help you achieve a great looking and performing web site.
Course info
Rating
(2260)
Level
Intermediate
Updated
Nov 13, 2013
Duration
3h 50m
Table of contents
Description
Course info
Rating
(2260)
Level
Intermediate
Updated
Nov 13, 2013
Duration
3h 50m
Description

Building great looking websites that work well with different sized devices can be a challenge. By utilizing Twitter's Bootstrap 3 framework, you can meet that challenge head-on. Bootstrap 3 is a mobile-first responsive design framework for structuring your website's HTML. It includes a great grid system, responsive design, CSS typography and components to solve many of the most common design challenges that face web developers today.

About the author
About the author

Shawn Wildermuth has been tinkering with computers and software since he got a Vic-20 back in the early '80s. As a Microsoft MVP since 2002, he's also involved with Microsoft as an ASP.NET Insider and ClientDev Insider.

More from the author
Less: Getting Started
Intermediate
1h 11m
Sep 19, 2018
More courses by Shawn Wildermuth
Section Introduction Transcripts
Section Introduction Transcripts

Course Introduction
Welcome to the Bootstrap 3 course here at Pluralsight. My name is Shawn Wildermuth of Wilder Minds. During this course we're going to show you how to use Bootstrap 3 in your own projects and also show you how to migrate your Bootstrap 2 projects to Bootstrap 3. During the length of this course we're going to start with a very simple website that represents the starting point for a particular Bootstrap 3 implementation. We're going to take this website and we're going to introduce Bootstrap 3 and rework it until we have a really good-looking site. We're going to transform this to this. Specifically what you're going to learn in this course is why Bootstrap is key to building great web projects. How Bootstrap can help you build better looking and better performing websites. We'll show you how to add Bootstrap to your project, how to customize Bootstrap so it doesn't look like every other Bootstrap site out there on the web. We'll introduce you to the Bootstrap basics, see how Bootstrap can help you implement the common metaphors that websites mostly use. We'll then show you the jQuery plugins that are included with Bootstrap. And then finally round it out with a walkthrough of how to migrate a Bootstrap 2 site to a Bootstrap 3 site. The way this course works is that we want you to see this actually working. We're not going to just spend time inside of PowerPoint bullet points. You're going to learn through observation. You're going to see me convert the beginning site all the way to the ending site using Bootstrap 3, its components, it plugins, its basics, its grid system, all of it. This should introduce you to the workflow of how Bootstrap 3 works and how to use it. And this way we want you to see how Bootstrap works from beginning to end and how all the parts fit together.

Why Bootstrap 3
Welcome to the first module of our Bootstrap 3 course. This module's about why Bootstrap 3. We're going to start off by talking about developers and designers and how websites are created today. We're going to dive into what Bootstrap actually is at a very high level. We're going to talk about the mobile web and then what I like calling Bootstrapping the web.

Getting Started
Welcome to the second module of the Bootstrap 3 course, my name is Shawn Wildermuth of Wilder Minds. In this module we're going to get started with Bootstrap. This is going to include getting Bootstrap from the Bootstrap website, adding it to a particular page. Teaching you about the grid system inside Bootstrap, using this grid system in a number of ways. Talking about offsets and rows, images and responsive helpers, then we'll dive into theming Bootstrap and what that means. And finally we're going to show you how to customize your Bootstrap package. Let's get started.

Bootstrap 3 Basics
Welcome to the third module of Bootstrap 3. My name is Shawn Wildermuth of Wilder Minds. In this module we're going to cover many of the basics of Bootstrap to show you a lot of the general features. These include the typography, the use of buttons, use of icons, navs and nav bars, lists, tables, and finally forms. Let's get started.

Bootstrap Components
Welcome to the fourth module of Bootstrap 3. My name is Shawn Wildermuth of Wilder Minds. In this module we're going to be talking about the components of Bootstrap 3. These are different components for building your web pages and represents some of the common metaphors that are used on web pages. These include page header and breadcrumbs, button groups, dropdowns, button dropdowns, input groups, pagination, thumbnails, panels, and finally wells. Let's get started with page header and breadcrumbs.

Bootstrap Plugins
Welcome to the fifth module of Bootstrap 3. My name is Shawn Wildermuth of Wilder Minds. In this module we'll be talking about Bootstrap 3 plugins. Specifically we're going to be going through collapse, the accordion, modal windows, the tab control, tooltips, alert, and the carousel. Let's get started.

Migrating to Bootstrap 3
Welcome to the last module of Bootstrap 3. In this module we'll talk about how to migrate to Bootstrap 3 from prior versions of Bootstrap. We're going to start by talking about the overview of the changes, and then we're going to migrate a simplified version of my blog. This is going to include moving my blog, which is currently at Bootstrap 2, to Bootstrap 3. We're then going to migrate all the grid settings, the navbar, the individual blog entries, the sidebar, and then some custom CSS that was included in the template. Let's get started.