Are you using Bootstrap 4 alpha 6 and trying to display a testimonial with specific elements arranged in a certain way? Here's what you can do:
- On the left: person's photo
- On the right: quote, name, and company logo (left-aligned)
This layout should be visible at tablet and desktop widths. However, when the window width is reduced, the image should move on top of the text set, and each part becomes centered.
Take a look at the current code snippet below...
<!-- 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>
The above code renders correctly on desktop screens like this...
https://i.sstatic.net/6x9BQ.png
However, at smaller screen sizes, it looks like this...
https://i.sstatic.net/UXQ1U.png
If you prefer the image to be placed on top and centered as mentioned earlier, there are alternative methods like using two columns as shown below...
<!-- 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 revised structure achieves the desired appearance on mobile devices...
https://i.sstatic.net/S2vP9.png
However, there may be concerns about overall markup correctness and alignment inconsistencies between different screen sizes like the one shown below...
https://i.sstatic.net/Im19f.png
If you're unsure about the best method or how to handle image responsiveness, consider exploring options for text alignment based on browser width breakpoints. Additionally, feel free to experiment with various classes and styling techniques to find the most suitable approach.
Remember that flexibility is key, so you don't have to stick strictly to predefined styles from Bootstrap documentation. Ultimately, the goal is to create a visually appealing and user-friendly design. Good luck!