Image

Images can be made reponsive very easily. Responsive images are images that never becomes wider than their parent container.

Responsive Image

Images can be made responsive by adding .img-responsive to the img element.


                    
    
      
        
  
    
    

        


  


  
        
          
          <img
        
        
          
            class="img-responsive"
        
        
          
            src="../assets/responsive-img.jpg"
        
        
          
            alt="reponsive image"
        
        
          
          />
        
  



    

  


      
      
        view raw
        
          responsive-image.html
        
        hosted with ❤ by GitHub

Round Image

Round or circular images are used in lot of place, such as profile picture. You can make image round or circular using .img-round class which apply border-radius: 50% to the image element.


                    
    
      
        
  
    
    

        


  


  
        
          
          <img
        
        
          
            class="img-responsive img-round"
        
        
          
            src="../assets/round.jpeg"
        
        
          
            alt="a girl"
        
        
          
          />
        
  



    

  


      
      
        view raw
        
          round-image.html
        
        hosted with ❤ by GitHub

Grid List

	<img
	class="img-responsive"
	src="../assets/responsive-img.jpg"
	alt="reponsive image"
	/>

	<img
	class="img-responsive img-round"
	src="../assets/round.jpeg"
	alt="a girl"
	/>