Bootstrap 3 - SPLessons

Bootstrap Images

Chapter 15

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Images

Bootstrap Images

shape Description

Bootstrap provides different predefined classes to display images in different formats. Bootstrap Images supports three predefined classes.

Rounded Corners

shape Description

Simply add the .img-rounded class to the image tag, then image will be displayed with rounded corners.

shape Example

SPLessons

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Image Examples</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  
  <body>
    
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Images </a> </h2>
		<img class="img-rounded" src="https://www.splessons.com/wp-content/uploads/2015/06/bootstrap-splessons1.jpg" alt="SPLessons" width="304" height="236" />

	  </div>
		
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>


Circle

shape Description

Simply add the .img-circle class to the image tag, then the image will be displayed as a circle.

shape Example

SPLessons

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Image Examples</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Images </a> </h2>   
		
		<img class="img-circle" src="https://www.splessons.com/wp-content/uploads/2015/06/bootstrap-splessons1.jpg" alt="SPLessons" width="304" height="236" />  
	  
	  </div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Thumbnail

shape Description

Simply add the .img-thumbnail class to the image tag, then the image will be displayed as a circle.

shape Example

SPLessons

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Image Examples</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Images </a> </h2> 
		<img class="img-thumbnail" src="https://www.splessons.com/wp-content/uploads/2015/06/bootstrap-splessons1.jpg" alt="SPLessons" width="304" height="236" />

	  </div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Bootstrap Responsive images

shape Description

In Bootstrap 3, images can be made responsive-friendly by adding the additional class .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to image so that it scales equally to that of the parent element. Add the .img-thumbnail class to the image tag, then the image will be displayed as a circle.

shape Example

SPLessons

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Image Examples</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Images </a> </h2>
		<div class="row"> 
			<img class="img-responsive" src="https://www.splessons.com/wp-content/uploads/2015/06/bootstrap-splessons1.jpg" alt="SPLessons" width="304" height="236" />
		</div>
	  
	  </div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

shape Description

Using the Bootstrap’s grid system and .thumbnail class, an image gallery can be created.

shape Example

Responsive Embeds

shape Description

Using the .embed-responsive-item class, videos or slideshows can be made responsive.

.embed-responsive-item class will be added to <iframe>, <embed>, <video>, and <object> elements.

shape Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Image Examples</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
  <div class="container">
    
    <h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Responsive Embeds </a> </h2>
    
			<!-- 16:9 aspect ratio -->
		<div class="embed-responsive embed-responsive-16by9">
		  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TZ1pCAtaCl4"></iframe>
		</div>

		<!-- 4:3 aspect ratio -->
		<div class="embed-responsive embed-responsive-4by3">
		  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TZ1pCAtaCl4"></iframe>
		</div>
 
   </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Summary

shape Key Points

  • Use img-rounded class to get round images and use img-circle class to get circled images.
  • Class .embed-responsive-item makes videos responsive.
  • Getting responsive images is possible with .img-responsive class.