Bootstrap

Why?

Desktop

Tablet

Mobile Phone

Mobile Phone

How?

12 column grid

image next to text

image next to text

three column text

three column text

But mobile?

image next to text

desktop

tablet

phone

But really, how?

Container

container

container

Row

Col

  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
      
 7 
      
 8 
      
 9 
      
 10 
      
 11 
      
 12 
    
  

Col

  

    
 1 
    
 2 
    
 3 
  

Col

  

    
 1 
    
 2 
  

Col

  

    
 1 
    
 2 
  
  

    
 1 
    
 2 
    
 3 
  

Col

  

    
 1 
    
 2 
  
  

    
 1 
    
 2 
    
 3 
  
  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
  

Col

  

    
 1 
    
 2 
  
  

    
 1 
    
 2 
    
 3 
  
  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
  

Col

  

    
 1 
    
 2 
  
  

    
 1 
    
 2 
    
 3 
  
  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
  

Exercise 1

Bootstrap Basics

Exercise 1

Exercise 1

What's with the different sizes?

Size Classes

different device sizes in bootstrap

desktop

tablet

phone

desktop

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

tablet

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

phone

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

desktop

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

desktop & tablet

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

desktop & tablet & phone

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

desktop & tablet & phone

  

    
 
      
    
    

      

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      
    
  

Exercise 2

responsive design

Exercise 2

desktop

tablet

phone

Column wrapping

  

    
 1 
    
 2 
  
  

    
 1 
    
 2 
    
 3 
  
  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
  

Column wrapping

  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
    
 7 
    
 8 
  

Column wrapping

desktop

tablet (landscape)

tablet (portrait)

phone

Exercise 3

Column wrapping

Exercise 3 - Column Wrapping

exercises/exercise_3/exercise_3.html

Exercise 3 - Column Wrapping

Desktop

Exercise 3 - Column Wrapping

Tablet (Landscape)

Exercise 3 - Column Wrapping

Tablet (Portrait)

Exercise 3 - Column Wrapping

Mobile Phone

Nesting

Nesting

Nesting

  

    
 Content 
    
 Menu 
  

Nesting

  

    
 
      Content
      


      
    
    
 Menu 
  

Nesting

  

    
 
      Content
      

        
 ... 
        
 ... 
        
 ... 
        
 ... 
        
 ... 
        
 ... 
      
    
    
 Menu 
  

Exercise 4

Nesting

Exercise 4 - Nesting

exercises/exercise_4/exercise_4.html

Exercise 4 - Nesting

Desktop

Exercise 4 - Nesting

Tablet (Landscape)

Exercise 4 - Nesting

Tablet (Portrait)

Exercise 4 - Nesting

Mobile Phone