Responsive Images and Videos

Add the class .img-fluid to the <img> tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it scales nicely to fit the containing element

Ex.    

...

<style type="text/css">

    .bs-example{

        margin: 20px;       

    }

    .box{

        width: 400px;

        border: 4px solid #000;

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="alert alert-info alert-dismissible fade show">

        <strong>Note!</strong> Click image to next

        <button type="button" class="close" data-dismiss="alert">&times;</button>

    </div>

 

    <h2>Non-Responsive Image</h2>

    <div class="box">

        <img src="/examples/images/nkr.jpg" alt="Cloudy Sky">

    </div>

    <hr>

    <h2>Responsive Image</h2>

    <div class="box">

        <img src="/examples/images/nkr.jpg" class="img-fluid" alt="hi, have a nice day ">

    </div>

</div>

</body>

 

Responsive video

 

To do this wrap any embed like an <iframe>, or <video> in a <div> element and apply the class .embed-responsive, and an aspect ratio class such as .embed-responsive-16by9.

 

 

Ex.

...

<style type="text/css">

    .bs-example{

        margin: 20px;       

    }

    .box{

        width: 400px;

        border: 4px solid #000;

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="alert alert-info alert-dismissible fade show">

        <strong>Note!</strong> Click on image

        <button type="button" class="close" data-dismiss="alert">&times;</button>

    </div>

 

    <h2>Non-Responsive Image</h2>

    <div class="box">

        <img src="/examples/images/nkr.jpg" alt="Cloudy Sky">

    </div>

    <hr>

    <h2>Responsive Image</h2>

    <div class="box">

        <img src="/examples/images/nkr.jpg" class="img-fluid" alt="Hi, have a nice day">

    </div>

</div>

</body>

Powered  by Codersarts