Bootstrap Responsive Design

Name: Bootstrap Responsive Design
Rating: 4.7 (32 reviews)

Design for mobile, tablet and desktop screens with ease!

Created bySkillSprints Inc.

Last updated 10/2020

English

What you'll learn

How to include Bootstrap libraries
How to use the Bootstrap starter template
Understand how to apply Bootstrap themes
Use Basic Bootstrap grids
Understand CSS Media Queries and how they relate to Bootstrap
Understand the transition from stacked to horizontal grids
Be able to create grids for mobile, tablet and desktop using Bootstrap
Use Boostrap to render headings, body and lead body copy
Use Bootstrap to render underline, small text, bold and italics
Adjust alignment using Bootstrap
Render lists, and description lists using Bootstrap
Create a basic table
Add striped rows to a table using Bootstrap
Create a bordered table using Bootstrap
Create an interactive hover table
Understand how the concept of responsive design applies to tables
Render form controls using Bootstrap
Create optimized text inputs using Bootstrap
Understand form groups
Work with forms on a Bootstrap grid
Understand and use the Boostrap Image Classes
Use responsive images
Use the Collapse Plugins
Create Accordions to manage content
Create standard and inverted navigation bars
Create dropdowns
Add buttons and form fields to nav bars
Create a basic carousel

Course content

9 sections • 42 lectures • 2h 54m total length

Quickstart: Making Your First Bootstrap App14:55
Get started quickly and make your first Bootstrap app.
Including Bootstrap Libraries6:01
Including the Bootstrap libraries allow you to access all Bootstrap features. You'll learn how in this video lecture.
The Bootstrap Starter Template3:57
A good starter template will make it easy to use Bootstrap for every project you start. Mark explains this in this video.
Bootstrap Themes6:54
Bootstrap themes can be used to skin your Bootstrap apps and give them a unique look. You'll learn more about themes in this video.
Container versus Container Fluid4:02
Central to Bootstrap is the concept of the container. You'll learn about containers and fluid containers in this video lecture.
Custom Components Intro: Footer3:48
There is a world of custom components for Bootstrap. Mark will introduce you to them and show you how one works in this video.

Section Introduction: Containers and Grids0:59
Basic Grids and Media Queries4:20
Much of the 'magic' of Bootstrap involves the grid. The Bootstrap grid allows you to design once and display accurately across a variety of screen sizes and resolutions.
Stacked to Horizontal Grids7:55
Understanding how grids transition from stacked (mobile) to horizontal is critical to understanding how Bootstrap works.
Mobile and Tablet Grids3:53
You'll learn how to create grids that work on both mobile and tablet devices as Mark codes an example.
Mobile, Tablet and Desktop Grids10:25
You'll learn to create a grid that works not only on mobile and tablets but also on desktop devices.

Section Introduction: Typography0:52
Headings, Body and Lead Body Copy4:23
Bootstrap manages typography well. You'll learn some basic typography tags in this video.
Underline, Small, Bold, Italics3:13
Mark will demonstrate more typographical tags in this video.
Alignment, Transformation and Abbreviation5:42
You'll learn how to align text, use text transformations and utilize abbreviations in this video lecture.
Lists and Description Lists3:38
Bootstrap does some neat things with HTML lists. You'll see a demonstration in this video lecture.
Codes, Keyboards and Variables5:15
You'll learn about some unique typographical formats you can use with Bootstrap in this video lecture.

Section Introduction: Tables0:46
Basic Table4:55
Mark creates a basic table styled by Bootstrap.
Adding Striped Rows3:37
You'll learn to create a basic table with striped rows in this video lecture.
Creating a Bordered Table3:33
You'll create a neat, clean table with visible borders in this section of the course.
Hover Table5:07
A hover table interacts with the user as they mouse over various segments of the table. Mark demonstrates this in this video.
Responsiveness and Tables3:13
Bootstrap tables can be made to be responsive. You'll learn how in this video lecture.

Section Introduction: Forms0:57
Form Controls7:45
Bootstrap styles your form controls so they are usable across a multitude of screen sizes and resolutions.
Text Inputs6:16
Bootstrap can also be used to style various types of text inputs and make them usable.
Form Groups4:52
Form groups can make your forms look more interesting and more usable at the same time.
Forms and the Grid6:21
Your forms can work with your Bootstrap grid to be usable across many different-sized screens.

Section Introduction: Navigation Bars0:40
Standard and Inverted Navigation Bars5:26
Bootstrap makes good-looking navigation bars easily. You'll examine the code with Mark in this video.
Dropdowns4:23
Easily add dropdowns to your navigation bars in this video lecture.
Buttons and Forms in Navbars4:12
Navigational bars can contain both buttons and forms in Bootstrap. You'll learn how to implement it in this video.

Requirements

A understanding of fundamental HTML will help make you successful

Description

It's a mobile phone world.

And a tablet world. And a laptop world. The fact is, it's a multi-screen world and your web sites and applications have to live in it.

Perhaps, you're looking for an easy way to implement the principals of responsive design in your own work. Perhaps, you want an easy mobile-first framework to wrap around your own work. Or, maybe, you just want to learn the right way to do things in a multi-screen world.

From the screen in your users' pockets to the giant 4K desktop screen, your apps and web sites have to look good everywhere-- but how does someone create for such varied screen sizes and resolutions--

The answer is Bootstrap.

Bootstrap is a visual, client-side framework that lets you build gorgeous mobile apps and build those into full screen-compliant applications. And, if you're going to learn Bootstrap, there is no better way then from our course Bootstrap Responsive Design.

In this course expert developer and master instructor Mark Lassoff will take you from the very fundamentals of development with Bootstrap to applying techniques like Grids and Navigation bars.

If you're serious about responsive design, then you need Bootstrap. And, if you're serious about learning Bootstrap you need Bootstrap Responsive Design from LearnToProgram.tv-- Over 500,000 online students can't be wrong

Who this course is for:

Web Designers or Developers who want an easy responsive framework
Programmers who need an easy way to make apps responsive

Bootstrap Responsive Design

What you'll learn

Explore related topics

Course content

Getting Started6 lectures • 40min

Containers and Grids5 lectures • 28min

Typography6 lectures • 23min

Tables6 lectures • 21min

Forms5 lectures • 26min

Images with Bootstrap3 lectures • 6min

Collapsables3 lectures • 9min

Navigation Bars4 lectures • 15min

Bootstrap Carousel4 lectures • 7min

Requirements

Description

Who this course is for: