3

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?

8 Answers 8

4
<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

3

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

4
  • Answers an tad old question but seems like a beautiful solution 👍🏻
    – milo526
    Jun 11, 2019 at 7:49
  • your answer is good. how do i align the image to the right of the text ? Jul 18, 2019 at 8:25
  • @SreejithSasidharan you want to have text on the left and image on the right? in that case there are two ways: 1st is to use the pull-right and pull-left classes. 2nd solution if you can change the html code and write first the div,col-sm-x for the text and then the div.col-sm-y for the image. I prefer the second solution. Both solutions require a bit of adjustments for internal paddings. Aug 8, 2019 at 13:27
  • 1
    This is not working on recent versions of bootstrap (tested on 4.5)
    – Inmer
    May 18, 2021 at 3:51
2

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>

3
  • I am aware I don't need bootstrap to solve the problem. I want to use bootstrap to compliment other elements on my site. Using the bootstrap grid system will make it easier to switch between mobile layout and desktop layout and it will help with consistency.
    – milo526
    May 11, 2016 at 15:11
  • @milo526 added example with bootstrap.
    – Ani Menon
    May 11, 2016 at 15:27
  • but the image is not responsive Aug 13, 2017 at 19:31
1

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>
0

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

2
  • I have tried this. It resulted in the exact same layout as the last image showed with the main text only beneath the image and not to the side of it.
    – milo526
    May 11, 2016 at 14:46
  • It's most likely down to bootstrap .row and .col With your layout you probably don't want to use a bootstrap grid. I'd be tempted to strip it back to basics and go from there May 11, 2016 at 14:51
0

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>
0

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>

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.