WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Figures


The determine element specifies the content material in conjunction with associated photos with an elective caption. The .Parent-caption class gives caption for the determine element.

Example

<html lang = "en">
    <head>
       <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta name = "viewport" content material = "width = device-width, initial-scale = 1, decrease-to-fit = no">

        <!-- Bootstrap CSS -->
        <hyperlink rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "anonymous">

        <name>Bootstrap 4 Example</name>
    </head>
    <body>
        <div class = "box">
            <h2>Figure Element</h2>
            <determine class = "discern">
                <img src = "https://media.Mnn.Com/property/photos/2015/10/panda-endure-bamboo.Jpg.638x0_q80_crop-smart.Jpg"
                    class = "determine-img img-fluid rounded" alt = "Figure Element"
                    height = "200" width = "200">

                <figcaption magnificence = "parent-caption">This is an  photo caption</figcaption>
            </determine>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-three.Three.1.Slim.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "nameless">
        </script>

    </body>
</html>