CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jeremy
Jeremy

Reputation: 1568

Bootstrap columns - text wrap in column on right of image

All i want to do is have a large block of text on the right hand side of an image. Its driving me crazy. The column containing text drops below the image as soon as the text becomes a certain size or is not given a width, one solution is to add a width to the text column, but isnt the point of bootstrap to not use fixed widths!?

All i have on the css of P is word-wrap: break-word; I have added a height on the image as else its too large - would like to restrict the size of the image to the size of the bootstrap column if that is also possible. I have tried all various css combinations. Sorry, this is probably a regular question, i have seen many answers to this, and tried all of them out. How do i create two columns in a row, one with an image and one with text?! This should be simple! (and probably is!). Thank you and sorry. nb i am in a laravel project, with bootstrap loaded and the css available.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">

<div id="banner" class="12u" >
    <div class="container">
        <div class="row">
            <div class="col-4">
                <img src="{{ asset('images/fun.jpeg') }}" alt="Picture" height="400em" >
            </div>
            <div class="col-8">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 314

Answers (2)

Fareed Khan
Fareed Khan

Reputation: 2923

You are doing everything right but not including width="100%" in your img tag

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="banner" class="12u" >
    <div class="container">
        <div class="row">
            <div class="col-4">
                <img width="100%" src="https://images.unsplash.com/photo-1590412513773-fa30db27b485?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Picture">
            </div>
            <div class="col-8">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

CanUver
CanUver

Reputation: 1774

I added img-fluid class for the image to be responsive. img-fluid class doing image width: 100% and height: auto. Thus, the image moves responsively according to the container it is in.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">

<div id="banner" class="12u">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="Picture" height="400em">

      </div>
      <div class="col-8">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions