I am not sure where I can edit the bootstrap modal pop-up on my portfolio? It is the chili picture in the bottom on this site. At the moment it shows in 1000*600px, but I would like it bigger.
Link to my portfolio
HTML
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<div class="block-image">
<div class="overlay"></div>
<img
class="coursepic"
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
>
</div>
<div class="block-data">
<h3>
Test
</h3>
</div>
</article>
</div>
CSS
img.coursepic {
width: 100%;
height: 100%;
}
img.coursepic:hover{
cursor: pointer;
opacity: 0.5;
background: rgba(0,0,0,0.5);
border-radius: 2px;
width: 100%;
height: 100%;
}
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
Its working fine with modal-lg
add this snippet in your centerModal()
$dialog.addClass("modal-lg");
for data-target="#myModal1", the #myModel1 should get modal-lg class
and add class="coursepic modal-lg"
or use this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Large Modal</h2>
<!-- Trigger the modal with a button -->
<img class="coursepic" data-toggle="modal" data-target="#myModal" src="http://placehold.it/350x150" />
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="coursepic" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap does have some built in styles to create modals of different sizes:
The important class here is modal-lg
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Related
I'm trying to add some text in the bootstrap modal footer, however the output looks like 2 divs side by side which I don't want. Below is the code :
<div class="modal fade" id="itiModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Day Wise data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
Entire or partial data collected from Wikipedia.
</div>
</div>
</div>
</div>
And the output looks like this:
I want the text to appear below the buttons. I've tried putting the text in P/span tags.
based on questioner want to make buttons align right and text below and left align:
heres full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
.modal-footer{display: block}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Bootstrap 4</h1>
<p>Resize this responsive page to see the effect!</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#itiModal">
Open modal
</button>
</div>
<div class="modal fade" id="itiModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Day Wise data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<div class="text-right">
<button type="button" class="btn btn-dark">Bookmark</button>
<button type="button" class="btn btn-dark">Details</button>
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
</div>
<p class="text-left">Entire or partial data collected from Wikipedia.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can add css code to modal footer: .modal-footer{ display: block }
here's full code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
.modal-footer{display: block}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Bootstrap 4</h1>
<p>Resize this responsive page to see the effect!</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#itiModal">
Open modal
</button>
</div>
<div class="modal fade" id="itiModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Day Wise data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark">Bookmark</button>
<button type="button" class="btn btn-dark">Details</button>
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<p>Entire or partial data collected from Wikipedia.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have this code to call my modal and data is being called using Jquery. But I can't update the font size inside. I tried this CSS but it only change the color, it doesnt change the size.
CSS
.modal-body{
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 26px;
}
Modal
<div class="modal" tabindex="-1" id="modal_feedback">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">IM Enhancement Request Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?!= include('Index_Feedback') ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="button" class="btn btn-success btn-send pt-2 btn-block" value="Submit Request" onclick="triggerSubmit()">
</div>
</div>
</div>
</div>
instead of overwriting the css you can add style in modal-body div
style={{fontSize="26px"}}
$('#ModalBtn').on('click',function(){
$('.modal-body').addClass('fontsize');
});
.fontsize{
font-size:30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="ModalBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a bootstrap 4 modal that I wish to display a little different. I want to display a floating box off to the left of the modal.
My question is how can I position both the modal and the floated box in the center of the page, even though the floating box is sitting outside the modal with a position absolute?
This is what it looks like currently, the floated box has a position absolute with a negative left position:
This is how I want it to look like, with the box and modal centered:
I don't know how much I have to modify the modal to do this, as I am hoping to make it responsive as well.
Would anyone have any ideas on how I could achieve this? It would be much appreciated.
Thanks, guys.
.affix-box {
position: absolute;
top: -40px;
left: -100px;
width: 200px;
height: 100px;
background-color: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="affix-box"></div>
<div class="modal-header">
<h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add width: 91%; and left: 9%; to modal-content
.affix-box {
position: absolute;
top: -40px;
left: -100px;
width: 200px;
height: 100px;
background-color: green;
}
.modal-content{
width: 91%;
left: 9%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="affix-box"></div>
<div class="modal-header">
<h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the simple replacement.
instead of top and left i have used transform: translate(-50%, -50%); which sets the center of the floating box on the top left corner of modal.
.affix-box {
position: absolute;
width: 200px;
height: 100px;
background-color: green;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="affix-box"></div>
<div class="modal-header">
<h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In addition to what #Joykal has said, you can also try changing the model size to reduce its width, you can use .modal-sm or .modal-lg class instead of .modal-xl depending on your need
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
May be this will help you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
#myModal .close{
display: none;
}
</style>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal('show');
$("#myModal2").modal('show');
});
$(".close,.close-btn").click(function(){
$("#myModal").modal('hide');
$("#myModal2").modal('hide');
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn">Basic</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style="right: 50%;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
<!--/. Modal -->
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog" style="left: 50%;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close-btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--/. Modal -->
</div>
</body>
</html>
As you can see in internet explorer bootstrap popup is not working fine.
Check ie screenshot example, please.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<iframe src="http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf" width="100%" height="375" type='application/pdf' style="margin-top:150px;"></iframe>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How to solve this problem? Appreciate any help.
I reccomend a different approach :
Embed the pdf using Google PDF viewer which uses javascript like so :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<iframe src="http://docs.google.com/gview?url=http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf&embedded=true" width="100%" height="375" type='application/pdf' style="margin-top:150px;">
</iframe>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tested successfuly on explorer and chrome.
just add this script in your code, it works fine with ie too, try this
<!--add this code in your file with script tag -->
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
<!--add this code in your file with script tag -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<iframe src="http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf" width="100%" height="375" type='application/pdf' style="margin-top:150px;"></iframe>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to make my bootstrap modal content responsive but when I resize browser modal contents like modal header , textboxes and login button going out of div please let me know how to make them responsive.
Here is the code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4 /jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="vertical-align:central">Login With Facebook</h4>
</div>
<div class="modal-body">
<img class="modal-content" src="http://www.firstbaptistashland.com/wp-content/uploads/2015/09/facebook-logo-png-transparent-background-150x150#2x.png" width="100" height="100" style="margin-left:220px;display:block;width:auto;" />
<br>
Email:<input type="text" /><br>
Password::<input type="text" />
</div>
<div class="modal-footer">
<input type="submit" class="btn-default modal-content" style="background-color: #4CAF50; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 24px; margin-right: 200px; cursor: pointer; " value="Login" />
</div>
</div>`
</div>
</div>
</div>
try this way on image tag
style="margin-left:220px;display:block;width:auto;"
style="width: auto; left: 50%; transform: translateX(-50%); display: block;"