Bootstrap Images

Bootstrap supports for images. There are three classes in Bootstrap that can be used to apply some simple style to the images.

The following classes add style to the images:

Classes	Uses
.img-rounded	It adds border-radius:6px to give the image rounded corners.
.img-circle	It makes the entire image round by adding border-radius:500px.
.img-thumbnail	It adds a bit of padding and a gray border.

Bootstrap Image-rounded Example

The class .img-rounded is used to add rounded corners to an image ( IE8 does not support rounded corners).

Example:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Rounded Corners</h2>         
   <img src="https://picsum.photos/seed/picsum/200/300
" class="img-rounded" alt="abc" width="300" height="250">   
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Image-circle Example

The class .img-circle is used to shape the image to a circle (IE8 does not support rounded corners).

Example:

    <!DOCTYPE html>
<html lang="en">
 <head>
   <title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Circle</h2>      
    <img src="https://picsum.photos/seed/picsum/200/300
" class="img-circle" alt="abc"  width="300" height="250">   
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </body>
</html>

  

Bootstrap Thumbnail Image Example

The class .img-thumbnail is used to shape an image to a thumbnail.

Example:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Thumbnail</h2>          
  <img src="https://picsum.photos/seed/picsum/200/300
" class="img-thumbnail" alt="abc" width="300" height="250">   
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </body>
</html>

Bootstrap Responsive images

The responsive images can adjust themselves automatically to fit the size of screen. You can create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.

Example:

  <!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Responsive Image</h2>
    <img class="img-responsive" src="https://picsum.photos/seed/picsum/200/300
" alt="abc" width="460" height="345">   
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
</body>
</html>

 

Bootstrap Responsive Videos / Embeds

In Bootstrap, you can also add videos and scale them properly on any devices. The class .embed-responsive-item is used to create a responsive video. Class can be applied directly to <iframe>, <embed>, <video>, and <object> elements.

Let's take an example:

In the following example, we add .embed-responsive-item class to an <iframe> tag to make the video responsive. It can scale the video nicely according to the parent element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Responsive Embed</h2>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap4 Images

Aligning images are used to float an image to the right with the .float-right class or to the left with .float-left.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Aligning images Example</h2>
  <p>Use the float classes to float the image to the left or to the right:</p> 
   <img src="https://picsum.photos/seed/picsum/200/300
" class="float-left" alt="abc" width="300" height="250">    
  <img src="https://picsum.photos/seed/picsum/200/300
" class="float-right" alt="abc" width="300" height="250">     
</div>  

</body>
</html>

Next TopicBootstrap Glyphicon

← prev next →