Images are required for any web application. It is very important to display
them properly. Bootstrap comes with many different classes that will
help us display images properly in our web sites.
Responsive images mean one that fits its shape container of its own size.
Creating a responsive image in Bootstrap is just one a matter of the
same class. This feature is especially useful when we are creating portals
we do not know the size of the users and the size they are going to upload. So,
adding the Bootstrap responding class will be very useful in such situations.
We should too note that Bootstrap will not resize the actual image. It will
only change its shape using CSS Properties.
The class used to create responsive images is img-responsive. Let's make
a grid using Bootstrap's grid system and then add a responsive image
to check how it fits Grid size. There are steps to add a responsive image.
Bootstrap-Images.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Images</title>
<!-- CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet">
<!-- Javascript -->
<!-- put jQuery.js before bootstrap.min.js;
and then add custom jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<!-- Add Custom CSS below -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4" style="background: grey">
<img src="../images/BSLogo.png" style="background-color:Black; border-width:medium;"
class="img-responsive">
</ div>
</div>
</div>
</body>
</html>
The output of the above code will look like this:
Bootstrap also offers some helper classes to decorating images on the go. The helper
classes of Bootstrap are:
|
Images classes
|
Desc.
|
|
img-rounded
|
Create a square image but with a slightly rounded corner.
|
|
img-circle
|
Create a circular image.
|
|
img-thumbnail
|
Create an image with a clickable effect. It also adds a hover effect to the image.
|
Bootstrap-Images2.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Images</title>
<!-- CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet">
<!-- Javascript -->
<!-- put jQuery.js before bootstrap.min.js;
and then add custom jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<!-- Add Custom CSS below -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" style="background: grey">
<img src="../images/BSLogo.png" style="background-color:grey; border-width:medium;"
class="img-rounded">
</ div>
<div class="col-md-2" style="background: grey">
<img src="../images/BSLogo.png" style="background-color:yellow; border-width:medium;"
class="img-circle">
</ div>
<div class="col-md-2" style="background: grey">
<img src="../images/BSLogo.png" style="background-color:green; border-width:medium;"
class="img-thumbnail">
</ div>
</div>
</div>
</body>
</html>
The output of the above code will look like this:
No comments:
Post a Comment
Please do not enter any spam link in the comment box.