Centering Image and Media Body in Bootstrap's Media Object

Welcome to my first post on stackoverflow, hoping everything goes smoothly.

I am struggling with aligning the content centrally and placing the images to the left and right of the center in 3 media objects. I have provided images of the current layout and how I envision it below.

Current Desired

Below is the code snippet I am working with;

<!-- Reviews start !-->
    <section id="reviews">
            <div class="media border p-3 center-stuff col">
                <img src="images/prof-1.jpg" class="rounded-circle media-img mt-2 align-self-center">
                <div class="media-body col-md-12 center-stuff">
                    <h4 class="mt-3">Stan Dutton <small><i>In Store Review on October 18, 2019</i></small></h4>
                    <blockquote>
                        <p class="mb-3">"Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!""Ale on point. Free retro games consoles playable open till close, can't get enough!"</p>
                    </blockquote>
                    <p class="center-stuff">Customer Satisfaction %</p>
                    <div class="progress col-6 center-stuff mb-3">
                        <div class="progress-bar" style="width:93%"></div>
                    </div>
                </div>
            </div>
            <div class="media border p-3 mt-3">
                <div class="media-body col-md-12 center-stuff">
                    <h4 class="mt-3">Stan Dutton <small><i>In Store Review on October 18, 2019</i></small></h4>
                    <blockquote>
                        <p class="mb-3">"Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!""Ale on point. Free retro games ...
                    </blockquote>
                    <p class="center-stuff">Customer Satisfaction %</p>
                    <div class="progress col-6 center-stuff mb-3">
                        <div class="progress-bar" style="width:93%"></div>
                    </div>
                </div>
htmlcssbootstrap-4

Answer №1

check it out:

<section id="reviews">
            <div class="media border p-3 center-stuff col">
                <img
                    src="images/prof-1.jpg"
                    class="rounded-circle media-img mt-2 align-self-center"
                />
                <div class="media-body col-md-12 center-stuff">
                    <h4 class="mt-3">
                        Stan Dutton
                        <small
                            ><i>In Store Review on October 18, 2019</i></small
                        >
                    </h4>
                    <blockquote>
                        <p class="mb-3">
                            "Great experience with latest gaming consoles available,
                            free to play all day long!" "Great experience with latest
                            gaming consoles available, free to play all day long!"
                            "Great experience with latest gaming consoles available,
                            free to play all day long!" "Great experience with latest
                            gaming consoles available, free to play all day long!"
                            "Great experience with latest gaming consoles available,
                            free to play all day long!"
                        </p>
                    </blockquote>
                    <p class="center-stuff">Customer Satisfaction %</p>
                    <div class="progress col-6 center-stuff mb-3">
                        <div class="progress-bar" style="width:93%"></div>
                    </div>
                </div>
            </div>
            <div class="media border p-3 center-stuff col">
                <div class="media-body col-md-12 center-stuff">
                    <h4 class="mt-3">
                        Stan Dutton
                        <small
                            ><i>In Store Review on October 18, 2019</i></small
                        >
                    </h4>
                    <blockquote>
                        <p class="mb-3">
                            "Great experience with latest gaming consoles available,
                            free to play all day long!" "Great experience with latest
                            gaming consoles available, free to play all day long!"
                            "Great experience with latest gaming consoles available,
                            free to play all day long!" "Great experience with latest
                            gaming consoles available, free to play all day long!"
                            "Great experience with latest gaming consoles available,
                            free to play all day long!"
                        </p>
                    </blockquote>
                    <p class="center-stuff">Customer Satisfaction %</p>
                    <div class="progress col-6 center-stuff mb-3">
                        <div class="progress-bar" style="width:93%"></div>
                    </div>
                </div>
                <img
                    src="images/prof-1.jpg"
                    class="rounded-circle media-img mt-2 align-self-center"
                />
            </div>
            <div class="media border p-3 center-stuff col">
                <img
                    src="images/prof-1.jpg"
                    class="rounded-circle media-img mt-2 align-self-center"
                />
                <div class="media-body col-md-12 center-stuff">
                    <h4 class="mt-3">
                        Stan Dutton
                        <small
                            ><i>In Store Review on October 18, 2019</i></small
                        >
                    </h4>
                    <blockquote>
                        <p class="mb-3">
                            "Great experience with latest gaming consoles available,
                            free to play all day long!" "Great experience with latest
                            gaming consoles available, free to play all day long!"
                            "Great experience with latest gaming consoles available,
                            free to play all day long!" "Great experience with latest
                            gaming consoles available, free to play all day long!"
                            "Great experience with latest gaming consoles available,
                            free to play all day long!"
                        </p>
                    </blockquote>
                    <p class="center-stuff">Customer Satisfaction %</p>
                    <div class="progress col-6 center-stuff mb-3">
                        <div class="progress-bar" style="width:93%"></div>
                    </div>
                </div>
            </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Overlapping Divs and Colliding Elements

I am currently exploring the moment when my two yellow divs will overlap and make contact with each other. It seems that the collision detection is triggering true even when the divs are not intersecting. If you'd like to take a look at the example, ...

jqueryhtmlcssanimation

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

The background banner is failing to display within the divbox

Having some trouble with my top banner in the HTML and CSS code I'm using to create a master page for ASP.NET. Oddly, the banner does show up on the design tab in Visual Studio, but it's not displaying properly. Here's the relevant code, can ...

asp.netcssimagehtml

Utilize Jquery to transfer a JSON API Request element to an array

Currently, I am immersed in a project where I am learning how to utilize APIs and extract data from them. However, I have encountered an issue with getting a specific element from the JSONP result that I am receiving. My goal is to extract only the address ...

javascripthtmlxmlarraysjson

Loading a Threejs model: "The CORS policy has blocked access to XMLHttpRequest from origin 'null' - How can I test this locally? Or should I simply upload it?"

Experimenting with three.js locally on a single HTML page, I am interested in exploring loading and manipulating 3D object files. Here is the code snippet that I am currently using: var loader = new THREE.AMFLoader(); loader.load( '. ...

javascripthtmlfilethree.js

What are the steps for positioning the footer at the bottom of the page?

Need help positioning a footer at the bottom of the page? Using the class fixed-bottom causes the footer to overlap the content when scrolling. <div class="sticky-top"> <qipr-header></qipr-header> <qipr-sidenav>&l ...

cssbootstrap-4

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

javascriptcssreactjstwitter-bootstrap

Determining the height of a different element using only CSS, Stylus, or Nib

Looking to create a navigation bar using CSS Markup: <nav> Navigation content </nav> <div id="mainContent"> Main page content </div> CSS: nav { position:fixed; height: X%; min-height: Ypx; } #mainContent { ...

htmlcssstylesheetstylus

Changing the color of MUI Typography when selected

Struggling to modify the styling of the Typography component nested inside a MenuItem. Unable to apply styles to ListItem as intended Check out my code here: https://codesandbox.io/s/dztbc?file=/demo.tsx:1481-1804 Desired behavior: Change styling on sele ...

cssreactjsmaterial-uimenuitemtypography

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

phphtmlcss

Retrieve the row index in PHP after loading data onto a web page

I have been utilizing PHP to retrieve data from a MySQL database and showcase it within a DIV on a webpage. The information I am retrieving pertains to a list of tasks, and I would like users to have the ability to delete a task once it has been completed. ...

phphtmlmysqlrowid

What causes the e.preventDefault function to override all subsequent lines of code?

Placing the e.preventDefault() after the code allows it to work, but results in a page refresh. If I keep it at the beginning of the code, it prevents the other lines from executing and doesn't send the request. function loadPhoto(e){ e.prevent ...

javascripthtmlnode.jsserver

Avoiding double entries in the shopping list using DOM selectors in JavaScript

I have been struggling with preventing duplicate items from being added to a shopping list that I created. Even though I thought the code below would solve the issue, it hasn't been effective so far. My expectation was for the JavaScript code to acces ...

javascripthtmlcss

Adding dynamic images to Bootstrap Popover on the fly

Does anyone have suggestions on how to effectively retrieve the image from the data-img attribute in order to use it for a popover displaying product images? Thank you! <a href='#' class='toggle-popover' title='Hello World&apos ...

jquerybootstrap-4

What is the best way to ensure items are aligned to the top of the navbar as a picture is enlarged?

I have searched through various similar questions, but none of them have provided a solution to my specific issue. I have attempted multiple suggestions, but none have been successful. (I am working with bootstrap4) Here is the html code I am using: < ...

htmlcssbootstrap-4

ngx-bootstrap encountered an issue: TypeError - _co.openModal is unavailable as a function

Just starting out with ngx-bootstrap, I was attempting to create a modal using the instructions from this site : However, I encountered the following error: ERROR TypeError: _co.openModal is not a function Here are some code snippets: //app.component ...

htmlangularfunctionngx-bootstrap

Issue encountered when displaying error messages during validation with Laravel version 5.8

Why is the error message not displaying with this code? Although I can see the error message in the page source code. @if($errors->has('slug')) <span class="invalid-feedback" role="alert"> <strong>{{ $errors->first('slu ...

phplaravelbootstrap-4laravel-5.8

Repainting can be an issue if the child element has not been transformed

My parent map has a large number of children pins, and I am experiencing significant slowdown while panning the map due to continuous repainting. Strangely, this issue is resolved when tapping on a child's pin and transforming the thumbnail inside it. ...

ioscssgoogle-chromerepaint

What is the best way to add a hyperlink to a specific section using Html.ActionLink in MVC?

Recently, I dove into the world of MVC and came across a puzzling issue. There's this HTML page that smoothly scrolls down to a specific section when you click on its name from the navigation bar. However, now I need to convert this piece of HTML code ...

htmlasp.net-mvc

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...

htmlcss