Is there a way to position the image at the exact center of the column?

Currently, I am attempting to design a container that includes an image on the left, a title and description in the center, and a button on the right. However, I am facing difficulties centering the image in the first column and the button in the last column. Can anyone provide insight into why this may be happening?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray; text-align: center;">
            <div class="row">
                <div class="col-md-2" style="text-align:center">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
You can simply add text-align: center

Answer №2

Check out the code snippet below for a flexible solution.

.row {
  display: flex;
  flex: auto;
  align-items: center;
  justify-content: center;
}
.col-md-2 {
  display: flex;
  justify-content: center;
}
.col-md-8 {
  display: flex;
  flex-direction: column;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>

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

Introduce a timeout in the ajax request

I'm currently facing an issue with adding a 2-second delay between the loader icon and the success message displaying the data as html. I attempted to use setTimeout in my ajax code with a specified delay number, but it doesn't seem to be workin ...

javascriptjqueryajaxdelaysettimeout

Issues with React - Material UI Menu functionality

I'm encountering an issue with the menu/menu item component from material ui when trying to render it based on a condition. Here is my code snippet... const AddSelectItemButton = () => { return ( <> <Fab ar ...

javascriptreactjsmaterial-ui

Does every controller page need to verify the Login Function?

In my PHP pages, I have implemented the MVC Pattern by creating a controller page for each view page to interact with the Model page. However, I have only checked user login at the top of every view page and not in the controller page. This leaves a potent ...

phpjavascriptjqueryhtml

Converting a decimal Unicode to a string in Javascript/Node: a beginner's guide

In my database, I have Arabic sentences that contain decimal unicodes for quotation marks and other elements. For example, here is a sample text: "كريم نجار: تداعيات &#8220;كورونا&#8221; ستغير مستقبل سوق السي ...

javascriptstringunicodedecode

What steps can be taken to resolve the Angular error stating that the property 'bankCode' is not found on type 'User' while attempting to bind it to ng model?

I'm encountering an issue with my application involving fetching values from MongoDB and displaying them in an Angular table. I've created a user class with properties like name and password, but I keep getting errors saying that the property doe ...

htmlangulartypescriptcompiler-errorsngmodel

Ensure each list item is directly aligned when swiping on a mobile device

Looking to make a simple horizontal list swipeable on mobile devices with tabs that snap from tab to tab, activating the content for the active tab immediately. The desired effect is to swipe directly from one tab to the next without having to click separ ...

javascriptjqueryhtmljquery-mobilemobile

What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using: * { margin: 0; padding: 0; box-sizing: border-box; } h1 { margin: 1rem; } ul { posit ...

htmlcsspositioncss-position

Updating the DOM after every click event to keep content fresh

When the #undoAll button is clicked, it triggers individual click events using the following code: $('#undoAll').click(function(){ $('#prospectTable tbody tr td a:not(.invisible)').each(function(){ $(this).trigger('cli ...

javascriptjquery

Unable to modify the main button color using LESS in the ant.design framework

I am experiencing an issue with using ant design to style a primary button. I have tried to change the background color using LESS, specifically by setting @btn-primary-bg: #1B2F55, but for some reason, it does not work. I know I could easily change the ba ...

cssreactjsless

Can you please explain how I can retrieve information from a Firebase collection using the NextJs API, Firebase Firestore, axios, and TypeScript?

I'm currently utilizing api routes within NextJS 13 to retrieve data from Firebase. The code for this can be found in api/locations.tsx: import { db } from "../../firebase"; import { collection, getDocs } from "firebase/firestore"; ...

javascripttypescriptfirebaseapinext.js

Having trouble locating the objects in the parent scope of an Angular directive

My custom directive needs to access the object $scope.$parent.users. When I use console.log $scope.$parent: myDirective.directive('scheduleItem', function(){ return { restrict: 'EA', link: function($sco ...

javascriptangularjs

The Art of JavaScript Module Patterns in Image Sliders

I'm diving into the world of JavaScript and decided to try my hand at creating an image slider. I managed to put together a basic version by following a couple of tutorials, and although it's working fine, I want to move it to an external js file ...

javascript

Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example: <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-pre ...

javascriptcssruby-on-railspathassets

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

The function to modify text color in Yii2 using the material bootstrap library is not functioning as intended

My attempt to modify the text color or background of the footer has been unsuccessful after integrating this library. I am unable to alter even a single text color. This is my MaterialAsset: <?php /** * @link http://www.yiiframework.com/ * @copyrigh ...

phpcsstwitter-bootstrapyii2-advanced-app

Positioning Images in Bootstrap 4

I'm encountering an issue with Bootstrap 4. The left box isn't aligning properly with the right box. This involves both HTML and CSS. How can I go about resolving this issue? <section> <div class="container"> <div class="row"& ...

htmlcssbootstrap-4

What is the best way to ensure that the background of wrapped text extends precisely to the pixel distance of the text?

Having a simple issue that I believed could easily be solved with modern CSS, but I'm now confused. I was aiming to have the background of a text parent span precisely across the width of its longest text line, evenly spreading on the sides, different ...

htmlcss

Is there a way to utilize AJAX to submit a request to a PHP XML-RPC server?

To communicate with my XML-RPC PHP server from a PhoneGap app, I intend to send an XML-RPC request using AJAX. The request should contain the method, parameters, and all necessary details. ...

phpjavascriptcordovaxml-rpc

`Error encountered when attempting to convert date with Angular JS filter`

Utilizing angular js filter in the controller for date formatting. A user selects a date from a uib-datepicker-popup. The goal is to format this date using ISO 8601 (yyyy-mm-dd) date format. Upon logging the user-selected date, the output is as follows: S ...

javascriptangularjsdateangularjs-filter

The object returned by bodyParser is not a string but a data structure

I have been working on implementing a JSON content listener in Typescript using Express and Body-parser. Everything is functioning perfectly, except when I receive the JSON webhook, it is logged as an object instead of a string. import express from 'e ...

javascriptjsontypescriptexpressbody-parser