LearnKode

4 Example(s) of Bootstrap Images


Description :

.img-circle class Shapes the image to a circle (not available in IE8).


Bootstrap Images Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Images Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <img src="http://learnkode.com/files/Bootstrap.png" class="img-circle" alt="Bootstrap" width="304" height="236" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.img-rounded class adds rounded corners to an image (not available in IE8).


Bootstrap Images Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Images Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <img src="http://learnkode.com/files/Bootstrap.png" class="img-rounded" alt="Bootstrap" width="304" height="236" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.img-thumbnail class is used to make image in thumbnail size.


Bootstrap Images Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Images Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <img src="http://learnkode.com/files/Bootstrap.png" class="img-thumbnail" alt="Bootstrap" width="304" height="236" />
    </div>

</body>
</html>
Try it » Download Example »

Output

Description :

.img-responsive class makes an image responsive.


Bootstrap Images Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Images Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <img src="http://learnkode.com/files/Bootstrap.png" class="img-responsive" alt="Bootstrap" width="304" height="236" />
    </div>

</body>
</html>
Try it » Download Example »

Output