CODEWITHSUNDEEP
htmlbootstrap-4
Pawan Kumar
Pawan Kumar

Reputation: 1

Align text and image in a frame need to adjust text automatically bellow the image after image over?

i am working with bootstrap ? row splited into col-sm-6 and same another now image portion is complete with in height of 720px but text has more height then image not i want to align rest of the text below the image or in complete width of frame??

assets/images/posts/ " style="height: 100%; width: 100%; object-fit: contain;border-radius: 20px;">

Upvotes: 0

Views: 119

Answers (1)

Makdia Hussain
Makdia Hussain

Reputation: 762

If you just want the text to wrap around the image then you just need Bootstrap class="pull-left" on the images. Here I am giving an example of it, hopefully it will help you.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Wrapping Image with Text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        .row {
            margin-top: 30px;
        }
        .pull-left {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/people" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p> 
            </div>
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/nature" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
            </div>
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/arch" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
            </div>
        </div>
    </div>

    <!--latest jQuery 3-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <!--Bootstrap JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 0

Related Questions