All for Joomla All for Webmasters

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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <title>Bootstrap image</title>
  5. <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9. <h2>Rounded Corners</h2>
  10. <img src=“abc.jpg” class=“img-rounded” alt=“abc” width=“300” height=“250”>
  11. </div>
  12. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  13. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  14. </body>
  15. </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:

  1.     <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <title>Bootstrap image</title>
  5. <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9. <h2>Circle</h2>
  10. <img src=“abc.jpg” class=“img-circle” alt=“abc”  width=“300” height=“250”>
  11. </div>
  12. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  13. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  14. </body>
  15. </html>

Bootstrap Thumbnail Image Example

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

Example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <title>Bootstrap image</title>
  5. <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9. <h2>Thumbnail</h2>
  10. <img src=“abc.jpg” class=“img-thumbnail” alt=“abc” width=“300” height=“250”>
  11. </div>
  12. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  13. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  14. </body>
  15. </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:

  1.   <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <title>Bootstrap Example</title>
  5. <meta charset=“utf-8”>
  6. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7. <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11. <h2>Responsive Image</h2>
  12. <img class=“img-responsive” src=“abc.jpg” alt=“abc” width=“460” height=“345”>
  13. </div>
  14. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  15. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  16. </body>
  17. </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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Responsive Embed</h2>
  12.   <div class=“embed-responsive embed-responsive-16by9”>
  13.     <iframe class=“embed-responsive-item” src=“http://www.youtube.com/embed/XGSy3_Czz8k”></iframe>
  14.   </div>
  15. </div>
  16. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  17.  <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  18. </body>
  19. </html>

 

PinIt
submit to reddit

Leave a Reply

Top