CODEWITHSUNDEEP
htmlimagetwitter-bootstrap-3
milo526
milo526

Reputation: 5083

Wrap text around bootstrap image

I have been trying to wrap text around an image using bootstrap's grid system to limit the width of the image. The general layout would be a lot like this.

this

I am currently using

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-xs-12 col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div>  
        {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-xs-12">
        <hr />
    </div>
</div>

This code results in the following layout. layout

I have tried removing the second column and only keeping the column in which the image is nested.

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="row">
        <div class="col-sm-6">
            <h2>{!!$blogPost->title!!}</h2>
        </div>
        <div class="col-sm-6">
            <h3 class="pull-right">
                {{$blogPost->created_at}}
            </h3>
        </div>
    </div>  
    {!! Purifier::clean($blogPost->message) !!}
    <div class="col-xs-12">
        <hr />
    </div>
</div>

This will result in other unexpected text placement as can be seen here. layout

How can I achieve the desired effect and keep using the bootstrap grid system to set the width of my image in regards to the size of the viewport?

Upvotes: 3

Views: 27587

Answers (8)

Johnno
Johnno

Reputation: 1

The following worked for me in bootstrap 4:

<div class="row">
  <div class="col-md-12">
      <div class="float-left"  >
       <div class="float-right" style="max-width:50%;"><img src="/your/image/here" class="img-fluid" alt=""></div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit risus ut massa ornare pellentesque. Proin id leo id arcu placerat tincidunt.
         Integer eget porta metus, ac ultricies eros. Etiam aliquet sodales gravida. Integer neque mauris, malesuada sit amet ante ac, sagittis elementum lacus. 
         Nulla tellus nibh, tempus et elit vel, lobortis hendrerit felis.
         Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In pretium purus quis erat dapibus hendrerit.
    </div>      
  </div>
</div>

Upvotes: 0

Peeyush Sachan
Peeyush Sachan

Reputation: 1

bootsrap 4 text-warp with images

please see in fool page view click here enter image description here

<!doctype html>
<html lang="en">
  <head>
    <title>School</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <link rel="stylesheet" href="/css/style.css"  type="text/css">
<style>
   
</style>

</head>
  <body>
    <div class="header_details bright-pre-header bright-pre-header-mobile-disable bg-dark-color">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-5 bright-pre-header-item-left">
                                            
                        <div class="pull-left">
                             <i class="fa fa-map-marker" aria-hidden="true"></i> Near kanpur road, Nh 25, Kanpur Rd, Kanpur                             </div>
                                            </div>
                <div class="col-sm-7 bright-pre-header-item-right text-right">
                    <div class="quick-contacts pull-right">
      
                        <span class="bright-top-bar-mobile"><i class="fa fa-phone"></i> <a style="text-decoration: none; color:white" href="tel:0515 2829000">0515 2829000</a></span>
                        <span class="bright-top-bar-email"><i class="fa fa-envelope"></i><a  style="text-decoration: none; color:white" href="mailto:inf%6f%40%67punn%61o.com">[email protected]</a></span>
                        
                    </div>
                </div>
            </div>
        </div>
      </div>
      <h2 class="bg-dark-color m-0 header_he text-center"><div class="container"><span>GOVERNMENT POLYTECHNIC KANPUR</span><img src="https://i.pinimg.com/564x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" style="height: 70px; width: 70px;"> <span>
        राजकीय पॉलिटेक्निक 
        कानपुर</span></div>          </h2>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary p-0 sticky-top">
        <div class="brand_name"> <a class="navbar-brand" href="#">&nbsp;<img src="https://i.pinimg.com/564x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" style="height: 30px; width: 30px;"> <span>
            राजकीय पॉलिटेक्निक 
            कानपुर</span></a></div>
       
        <button class="navbar-toggler align-self-center ml-auto" type="button"  data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto bg-link-color">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home</a>
            </li>
      
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
              </li>
      
              <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
              </li>
      
              <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
              </li>
            
            
           
          </ul>
          
        </div>
      </nav>
      
      
      
      
    <div  class="container-fluid m-0 p-0 text-light" style="background:#2846F0;">
        <h2 class="text-center">Principal</h2>
     <div  class="text-center"><span>Home</span> <i class="fa fa-caret-right" style="font-size:15px;"></i><span> Principal</span></div>


    </div>



  <div class="container">
      <div row>
<div class="col-lg-4 col-sm-12 ">
    <img src="https://thesunpapers.com/wp-content/uploads/sites/19/2020/02/IMG_3097-scaled.jpg" class="img-thumbnail float-left mr-2 mb-1" >
</div> 
<div class="col-lg-12 col-sm-12">
    <h2 class="text-center">MR  Peter </h2>
    <p>
         
         
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved o


      </p>
      <p>
         
         
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved o


    </p>
    <p>
         
         
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved o


    </p>
</div>
      </div>
  </div>
      


      
    <script src="https://code.jquery.com/jquery-3.3.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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

drinkAcoffee
drinkAcoffee

Reputation: 59

the answer from @milo526 works pretty good, there is just a small flaw given by the negative margins of row and no margins for the text. you can add a div wrapping the text with the margins or paddings half your gutter-width or using a col-sm-12 with no float. Another small flaw is given by not enough margins between image and text, because of that you should add an extra right padding to the image. I put this adjustments in inline style, so they are visible.

<div class="row">
    <div class="col-sm-5" style="padding-right:30px;">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div> 
    </div>
    <div class="col-sm-12" style="float: none;">
      {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-sm-12">
        <hr />
    </div>
</div>

https://codepen.io/davdenic/pen/bPGRqa

Upvotes: 3

Robert Stevens
Robert Stevens

Reputation: 549

This works in bootstrap 4:

<div class="row">
    <div class="col-12 col-lg-2">
        <img src="http://placehold.it/150x150" alt="" class="img-responsive float-left mr-3">
    </div>
    <div class="col-lg-10">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui 
temporibus aliquid dignissimos dolor aut at, libero est obcaecati atque 
culpa, sequi reiciendis nostrum cumque magnam nulla in molestias 
nesciunt illo?</p>
    </div>
</div>

Upvotes: 0

aBertrand
aBertrand

Reputation: 329

What worked for me is the following (based on OP's original code). Please not that I used a max-width style attribute to keep the responsiveness (40% being roughly 5 out of 12):

<div class="row">
    <div class="col-xs-12">
        <img class="pull-left" style="max-width:40%;" src="{{$blogPost->getImagePath()}}">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                {{$blogPost->created_at}}
                </h3>
            </div>
        </div>  
        {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-xs-12">
        <hr />
    </div>
</div>

Upvotes: 1

Ani Menon
Ani Menon

Reputation: 28239

Example using bootstrap :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
  <div class="span12">
    <img src="http://www.vanilladome.fr/games/artworks/SM3DW_PERSOS_MARIO2.png" class="pull-left myclass" />
    <span>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
      1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

  </div>
</div>

Upvotes: 2

milo526
milo526

Reputation: 5083

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-xs-12 col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div> 
    </div>
    {!! Purifier::clean($blogPost->message) !!}
    <div class="col-xs-12">
        <hr />
    </div>
</div>

Wrapping the title and created at date in a new column to compliment the width of the image and setting all the other text outside any column did the trick for me.
A small downside is that the margins don't line up but I am sure I'll find a fix for that using some custom CSS. enter image description here

Upvotes: 4

Marc Costello
Marc Costello

Reputation: 439

You need to float the image container left.

<div class="col-xs-12 col-sm-5 pull-left">
    <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
</div>

This will force the text to wrap around

Upvotes: 0

Related Questions