Bootstrap Images
Bootstrap support Images.To apply style to images Bootstrap have three classes.
Output
Bootstrap support Images.To apply style to images Bootstrap have three classes.
- img-rounded:For rounded corner image.
- img-circle:Cicle shape image.
- img-thumbnail:It adds a bit of padding and a gray border.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<img
src="abc.jpg"
class="img-rounded"
width="300"
height="300">
<img
src="abc.jpg"
class="img-circle"
width="300"
height="300">
<img
src="abc.jpg"
class="img-thumbnail"
width="300"
height="300">
</div>
</body>
</html>
Output Example
Responsive Images
Responsive images automatically adjust to fit the size of the screen."img-responsive" class is used for this purpose.
<img
class="img-responsive"
src="abc_image.jpg"
/>
Responsive Embeds
Videos will be automatically scale by ".embed-responsive-item".
Videos will be automatically scale by ".embed-responsive-item".
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="embed-responsive
embed-responsive-16by9">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/watch?v=uFKhFOZnJP0">
</iframe>
</div>
</div>
</body>
</html>
Output
No comments:
Post a Comment