CODEWITHSUNDEEP
cssimagebootstrap-4
gr68
gr68

Reputation: 502

text and images using Bootstrap 4

I need to make text wrap around image with bootstrap 4 but I cannot find how .

Here my code:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
    <div class="container">
        <div class="alert alert-warning" role="alert">
                    <img class="img-fluid" src="https://i.imgur.com/JgqPv7T.png" style="position: relative; right: 44px;">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
                </div>
                    </div>

Here what I have now: Here what I have now:

Here what I would to have: Here what I would to have:

How can I do it ?

Upvotes: 0

Views: 43

Answers (2)

alirizvi19
alirizvi19

Reputation: 167

I solve your design html and css. Please check it. Thanks

.img-fluid { position:absolute; left:-20px}
.alert.alert-warning { padding:30px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
    <div class="container">
        <div class="alert alert-warning" role="alert">
                    <img class="img-fluid" src="https://i.imgur.com/JgqPv7T.png">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
                </div>
                    </div>

Upvotes: 2

xKobalt
xKobalt

Reputation: 1508

Try this (Warning: this solution uses absolute values):

<head>
	<style>
    	.content {
        	padding-left: 8px;
        	margin-top: -35px;
        }
	</style>
</head>
<body>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
    <div class="container">
        <div class="alert alert-warning" role="alert">
            <img class="img-fluid" src="https://i.imgur.com/JgqPv7T.png" style="position: relative; right: 44px; ">
            <p class="content">
Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
			</p>
        </div>
    </div>
</body>

Upvotes: 1

Related Questions