Twitter Bootstrap

Practically oriented course about how to get started with and use Twitter Bootstrap

Twitter Bootstrap has reformed web UI design from the ground up. From having been an art form granted to the few, web UI design have now become a walk in the park and it is easy to created complex layouts with nested columns, panels/cards, accordions, sliding images and more.

This practically oriented course concerns web app developers that quickly need to be productive in using Bootstrap.

This is what you will learn
  • Create various layout types based on grids
  • Being able to design good looking cards (panels/widgets)
  • Being able to design navigational elements, such as tabbed panes and side-menues
  • Hantera font icons
Course Contents

Background and Overview

  • Why Twitter Bootstrap is awesome
  • Bootstrap components
  • HTML5 doctypes
  • Viewports
  • Containers
  • Installation and linkage of Bootstrap

Typography

  • Simple span and block elements
  • Standardized color system
  • Buttons
  • Images
  • Tables
  • Helper CSS classes

Page Layout

  • Grid system
  • Navbars
  • Sidebars

Font Icons

  • What is a font icon and why is it smart use
  • Glyphicons
  • Fontawesome
  • Simple icon markup
  • Icons within other components

Components

  • Dropdown menues
  • Button groups
  • Labels and badges
  • Breadcrumbs
  • Alerts
  • Progressbars
  • Panels and wells

Widgets

  • Tabbed panes
  • Scrollspy
  • Tooltips and popovers
  • Modal popups
  • Alerts
  • Collapsible panes and accordions
  • Carousel

Bootstrap Themes

  • Where to find themes
  • What to expect from commercial themes

Brief about Build Tools

  • Why you need a build tool
  • Node JS and its package mananger NPM
  • Bower
  • Gulp
  • Building a Bootstrap site using gulp
Facts
NameTwitter Bootstrap
Duration 1 Days
LevelBeginner
AudienceWeb app developers
Prerequisites Working knowledge of programming in HTML/CSS
Tools
  • NodeJS
  • JetBrain WebStorm IDE
  • Google Chrome
Price11 000 kr + moms 11000
Course Dates
DatePlace
Loading course dates...
Same-Company Discout

We offer a 20% discount for additional participants from the same company and at the same course date. Read more here.

On-Site Course

If you order an On-Site course, we will come to you and hold the course in your office. The price is determined by our price model and is based on the number of course days, number of participants and any travel and lodging.

Read more about out price modell and term of sales here.

Related Courses
CourseDaysLevel
JavaScript3 Beginner Show
Angular Web App Development3BeginnerShow