Using mx-auto in Bootstrap's col class to center the img tag isn't working as expected

I am attempting to create a row with two columns; one is col-7 and the other is col-5. In col-, I am adding a form where I encountered an issue with col-7 as I tried to insert a png using an image tag. My goal is to center the image both vertically and horizontally inside col-5, but my attempts with mx-auto and my-auto have been unsuccessful.

https://i.sstatic.net/HypZo.png

Here is the link to the CodePen

.rect {  
  background-color: red;
}

.container {
  border: 5px solid #000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">


<div class="container">
<div class="row">
<div class="col-7 mx-auto"><img src="https://i.ibb.co/LC6Wchz/cover-image.png" class="" alt=""></div>
<div class="col-5 rect"></div></div></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Visit neramclasses.com for more information

javascripthtmlcssbootstrap-4

Answer №1

Utilize the flex feature in Bootstrap starting from versions 4.5 and 5.0

<div class="col-7 d-flex justify-content-center"><img src="https://i.ibb.co/LC6Wchz/cover-image.png" class="" alt=""></div>

Give it a try in your own code

For more tips, check out this answer: How to center content in a bootstrap column?

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

Choose the data attribute value and incorporate it into the select dropdown options

I'm brand new to Vue.js. Specifically, the requirement is that the backend will input time slot values into the data-times attributes in array format. My task is to extract and update these time slots based on the selected location. If "Location 1" ...

javascriptjqueryvue.js

What is the best way to link an HTML button to a Python (or Flask) function?

When it comes to flask programming, the common practice is to use 'url_for' like {{url_for = 'some url'}}. This method involves linking URLs with the corresponding route in the application, as well as mapping templates (HTML). However, ...

pythonhtmlflask

Modify the DOM by adding a div element with specific bootstrap classes

for (i = 0; i < 10; i++) { if(i%4===0){ $("#image-album").append('<div class="row">'); } $("#image-album").append('<div class="col-md-3">image '+i+'</div>') ...

javascriptjquerytwitter-bootstrapdombootstrap-4

Generate a PHP array by iterating through an array of HTML input values using a for loop

I've been attempting to generate an array that includes the values of inputs within loops. As a newcomer to PHP, I have searched through various other questions without success. The process involves selecting a random number "$QuestionNoSelect" and re ...

phphtmlmysqlarraysforms

Retrieving an Object from an Object Group in javascript

I am encountering an issue while looping through something. https://i.sstatic.net/JkqcP.png However, I'm facing difficulties in obtaining the [["PromiseValue"]] object. If anyone can assist me with this, I would greatly appreciate it. Update : Th ...

javascriptjqueryarraysjson

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

htmlreactjsreact-hooksnext.jsuse-ref

The response from the ajax request is taking longer than expected

I have implemented the following code to pass and retrieve data using AJAX. function sendData(id) { var top = document.getElementById("tname").value; var first = document.getElementById("fname").value; var font_top = document.getElementByI ...

phphtmlajax

Is it possible to utilize dynamic imports in conjunction with a for loop in Next.js?

I often use dynamic import to bring in multiple components efficiently. Is it feasible to use a 'for' loop for this purpose? import dynamic from "next/dynamic"; let Dynamic = []; for (let i = 1; i < 80; i++) { const DynamicComponent = d ...

javascriptreactjsnext.js

What could be the reason for this code not changing the original array? Illuminate Express API

I encountered a strange issue while working on an Express API. I need to retrieve a list of posts from the MongoDB database and then add a new property to each post object before returning it to the client. Despite my efforts, I am not able to successfull ...

javascriptexpress

I'm having trouble sending registration emails through my server. What could be causing this issue?

Currently, I am in the process of developing a registration system that automatically sends an email with the user's username and password once they have successfully registered. The registration process functions smoothly up until the point where the ...

javascriptnode.jsnodemailer

django was unable to interpret the remainder: 'css/materialize.min.css' from 'css/materialize.min.css'

In following a tutorial, I am adding a chat bot UI that is embedded in Django. The file structure looks like this: . ├── db.sqlite3 ├── installDjango.sh ├── manage.py ├── rasadjango │ ├── asgi.py │ ├── __init__.p ...

cssdjango

The results of the jQuery selector appear differently in the browser console compared to PhantomJS

What could be causing the discrepancy in results when using the same jQuery selector? Visit this website for reference: See below code involving node.js and phantomjs-node(bridge): phantom.create(function(ph){ ph.createPage(function(page){ p ...

javascriptjquerynode.jsphantomjs

Determine whether the elements in the master array match the elements in the child array

Checking for data presence in arrays: [ { "productDisplay": "ZXP 105", "productNumber": "WZDR 112" }, { "productDisplay": "ZXP 106", "productNumber": "WZDR 113" } ] ChildArray [{productDisplay:"ZXP 105", ...

javascriptnode.jsmocha.jschai

Creating a dynamic two-player chess application using Django - requiring the player's chess board to automatically update whenever the opponent makes a move

I am looking for a solution where each player has their own webpage equipped with a Javascript chessboard GUI interface that allows them to click and drag pieces. The challenge is ensuring that when one player makes a move, the other player's chessboa ...

javascriptdjango

Refreshing express-session sessions

My goal is to enhance the user experience by retrieving their profile from the mongodb database when they visit the page, and then updating their session with this information. Currently, I am utilizing the following packages for managing sessions: - ex ...

javascriptexpresscookiesexpress-sessionconnect-mongo

Ng-outlet is unable to retrieve data from the parent $scope

When using Angular's standard route, I found that child controllers were able to access the parent $scope like this: <div ng-controller="ParentCtrl"> <ng-view></ng-view> </div> However, when switching to the Angular 1.5 C ...

javascriptangularjscomponentsangular-component-router

Discover how to implement custom data filtering in an Angular controller

Help needed: How can I remove decimals, add $ symbol in an Angular controller? Any ideas? $scope.data = [{ "key": " Logo", "color": "#004400", "values": [ [0, parseInt($scope.myappslogo)] ] }, { "k ...

javascriptangularjs

Tips for ensuring consistent position and size across various window dimensions with CSS

Can someone please assist me in centering an image in the window and ensuring it stays the same size regardless of the window size? I'm unsure how to accomplish this, any tips or guidance would be greatly appreciated. ...

htmlcssweb-frontendvisual-web-developer

An unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

Ever since June 12, 2012 at 11:20 TU, I have been noticing strange errors in my varnish/apache logs. At times, after a user has requested a page, I observe a similar request moments later but with the URL string after the last "/" being replaced by "undef ...

javascriptbrowser

Numeric Data Entry Format

I'm dealing with two inputs: one called "before" and the other called "after". When a value is entered in the before input, the value in the after input will be before / 1000 which means there might be 3 or more decimals at times. How can I displ ...

htmlangularinput