Bootstrap 4 Images

admin admin Jun 28, 2020 3074 1

Bootstrap 4 Images

Bootstrap 4 Images:

Rounded Corners Image:

use class .rounded, rounded corners to an image

Example:

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- here Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <!-- here Bootstrap CSS -->
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  9.     <title>Bootstrap 4 Images !</title>
  10.   </head>
  11.   <body>
  12.     <div class="container">
  13.       <img src="only learn 24 image.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
  14.     </div>
  15.     <!-- here Optional JavaScript -->
  16.     <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
  17.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  18.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  19.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  20.   </body>
  21. </html>

 

Output:

 

 

Circle Image

use class .rounded-circle, circle to an image

Example:

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- here Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <!-- here Bootstrap CSS -->
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  9.     <title>Bootstrap 4 Images !</title>
  10.   </head>
  11.   <body>
  12.     <div class="container">
  13.       <img src="only learn 24 image.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> 
  14.     </div>
  15.     <!-- here Optional JavaScript -->
  16.     <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
  17.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  18.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  19.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  20.   </body>
  21. </html>

 

Output:

 

Thumbnail Image:

use class .rounded, rounded corners to an image

Example:

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- here Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <!-- here Bootstrap CSS -->
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  9.     <title>Bootstrap 4 Images !</title>
  10.   </head>
  11.   <body>
  12.     <div class="container">
  13.       <img src="only learn 24 image.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
  14.     </div>
  15.     <!-- here Optional JavaScript -->
  16.     <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
  17.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  18.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  19.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  20.   </body>
  21. </html>

 

Otuput:

 

Image Responsive, Responsive Image, Bootstrap Responsive Image, image thumbnail, Image circle, rounded Image, Bootstrap image, Bootstrap 4 image, Bootstrap  image thumbnail, Bootstrap  image circle,  Bootstrap  image rounded, 

 

Thank You.........

Tags: