CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-4
Robert Andrews
Robert Andrews

Reputation: 1249

Correct way to wrap text under image in Bootstrap 4?

Using Bootstrap 4 alpha 6, I want to show a testimonial, comprising:

That is at tablet and desktop width. But, when the window width shrinks, I want to stack the set, so that the image is on top of the text set, and each part becomes center-aligned.

Currently, this is my code...

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="media">
      <img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      <div class="media-body">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

This successfully produces the following outcome at desktop width...

enter image description here

However, when shrunk, the arrangement looks like this...

enter image description here

Instead, I would like the image to go on top, rather than be wrapped, and preferably be centered. The text below should preferably be centered.

That code is the media object.

I have also tried using two columns to accomplish this - one of width 2, the other of 10...

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="row">
      <div class="col-md-2 text-center">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>
      <div class="col-md-10 text-center">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

... This successfully produces the right-looking result at mobile width...

enter image description here

... However, a) I'm not sure whether this mark-up is correct, and b) This means the text is centered even at desktop width, which is inappropriate...

enter image description here

I'm getting confused about the right approach, whether/when I should use img-fluid versus a fixed-width image etc. Can I have text be aligned differently depending on the browser width/breakpoint?

The d-flex/mr-auto stuff, I am not wedded to. This was copied from Bootstrap 4 documentation code for the media object.

What's the way to go?

Upvotes: 0

Views: 7356

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

The "correct" approach is a subjective, but you can use the responsive utilities to change the text alignment at different breakpoints. text-md-left will keep item left align on larger screens, and then use text-center to center on smaller screens.

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="row">
      <div class="col-md-2 text-md-left text-center">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>
      <div class="col-md-10 text-md-left text-center">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

http://www.codeply.com/go/tuTd2OiZFx

Upvotes: 1

Related Questions