Course: Bootstrap Responsive Design

Bootstrap Responsive Design

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
  • Self-Paced
About this Course

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 Over 500,000 online students can't be wrong.

Who is the target audience?

  • Web Designers or Developers who want an easy responsive framework
  • Programmers who need an easy way to make apps responsive
Basic knowledge
  • A understanding of fundamental HTML will help make you successful
What you will 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
Number of Lectures: 41
Total Duration: 02:54:32
Getting Started
  • Quickstart: Making Your First Bootstrap App Preview  

    Get started quickly and make your first Bootstrap app.

  • Including Bootstrap Libraries  

    Including the Bootstrap libraries allows you to access all Bootstrap features. You'll learn how in this video lecture.

  • The Bootstrap Starter Template  

    A good starter template will make it easy to use Bootstrap for every project you start. Mark explains in this video.

  • Bootstrap Themes  

    Bootstrap themes can be used to skin you Bootstrap apps and give them a unique look. You'll learn more about themes in this video.

  • Container versus Container Fluid  

    Central to Bootstrap is the concept of the container.  You'll learn about containers and fluid containers in this video lecture.

  • Custom Components Intro: Footer  

    There is a world of custom components for Bootstrap. Mark will introduce you to them and show you how one works in this video.

Containers and Grids
  • Section Introduction: Containers and Grids  
  • Basic Grids and Media Queries  

    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 Grids  

    Understanding how grids transition from stacked (mobile) to horizontal is critical to understanding how Bootstrap works.

  • Mobile and Tablet Grids  

    You'll learn how to create grids that work on both mobile and tablet devices as Mark codes an example.

  • Mobile, Tablet and Desktop Grids  

    You'll learn to create a grid that works not only on mobile and tablet, but also on desktop devices.

  • Section Introduction: Typography  
  • Headings, Body and Lead Body Copy  

    Bootstrap manages typography well. You'll learn some basic typography tags in this video.

  • Underline, Small, Bold, Italics  

    Mark will demonstrate more typographical tags in this video.

  • Alignment, Transformation and Abbreviation  

    You'll learn how to align text, use text transformations and utilize abbreviations in this video lecture.

  • Lists and Description Lists  

    Bootstrap does some neat things with HTML lists. You'll see a demonstration in this video lecture.

  • Codes, Keyboards and Variables  

    You'll learn about some unique typographical formats you can use with Bootstrap in this video lecture.

  • Section Introduction: Tables  
  • Basic Table  

    Mark creates a basic table styled by Bootstrap.

  • Adding Striped Rows  

    You'll learn to create a basic table with striped rows in this video lecture.

  • Creating a Bordered Table  

    You'll create a neat, clean table with visible borders in this section of the course.

  • Hover Table  

    A hover table interacts with the user as they mouse over various segments of the table. Mark demonstrates in this video.

  • Responsiveness and Tables  

    Bootstrap tables can be made to be responsive. You'll learn how in this video lecture.

  • Section Introduction: Forms  
  • Form Controls  

    Bootstrap styles your form controls so they are usable across a multitude of screen sizes and resolutions.

  • Text Inputs  

    Bootstrap can also be used to style various types of text inputs and make them usable.

  • Form Groups  

    Form groups can make your forms look more interesting and be more usable at the same time. 

  • Forms and the Grid  

    Your forms can work with your Bootstrap grid to be usable across many different sized screens.

Images with Bootstrap
  • Section Introduction: Images with Bootstrap  
  • Bootstrap Image Classes  

    Bootstrap has classes that can be used to style images. You'll learn how in this section of the course.

  • Responsive Images  

    Responsive images adjust for screen size.  They are an important facet of responsive design.

  • Section Introduction: Collapsables  
  • The Collapse Plugin  

    When you have a lot of content and a small screen size, collapsibles can be great to hide content until it's needed by the user. 

  • Accordions  

    An accordion is stack of collapsibles that allow you to hide and categorize content. It's a great way to display lots of information on mobile devices.

Navigation Bars
  • Section Introduction: Navigation Bars  
  • Standard and Inverted Nav Bars  

    Bootstrap makes good looking navigation bars easily.  You'll examine the code with Mark in this video.

  • Dropdowns  

    Easily add dropdowns to your navigation bars in this video lecture.

  • Buttons and Forms in Navbars  

    Navigational bars can contain both buttons and forms in Bootstrap. You'll learn how to implement in this video.

Bootstrap Carousel
  • Section Introduction: Bootstrap Carousel  
  • Creating a Basic Carousel  

    An image carousel is a common way to display a number of images in Bootstrap. Easy to code, Mark demonstrates in this video.

  • Adding Captions  

    Easily add captions to your image carousels.

Reviews (0)