.col-md-4 {
text-align:center
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>
Test
</p>
<p>
Testttttttttttttt
</p>
</div>
</div>
</div>
https://jsfiddle.net/jze8gqb1/1838/
I want to align text items in one column. I used display:inline-block but not working. How can I fix? Thank you.
Output
Test
Testttttttttttttt
Desired Output
Test
Testttttttttttttt
You can do this by using a single p tag and white-space: pre-line:
.col-md-4 {
text-align:center
}
p {
white-space: pre-line;
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>
Test
Testttttttttttttt
</p>
</div>
</div>
</div>
You can find more information about the white-space property here.
add this to your class
class="text-left"
Try this
<div class="container">
<div class="row">
<div class="col-md-4">
<p class="text-left">
Test
<br>
Testttttttttttttt
</p>
</div>
</div>
</div>
No CSS, just add class="text-left" to desired p element
Related
I have a container created with bootstrap and I want to put a text inside the container, but if the text has a long value it does not go to the bottom but instead crosses the container, how to properly make the text not cross the container and just summon in the bottom of the upper text.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
<div class="container bg-danger">
<div class="row">
<div class="col">
<a class="text-warning">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</div>
</div>
</div>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="container bg-danger text-break">
<div class="row">
<div class="col">
<a class="text-warning">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</div>
</div>
</div>
Just add text-break in your container.
Try it. Use text-break.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
<div class="container bg-danger">
<div class="row">
<div class="col">
<a class="text-warning text-break">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</div>
</div>
</div>
This maybe easy but it feels more tricky for me to display 3 images in a row with responsive layout by using bootstrap
I want to create a page in my website with something like this -
Here's what I want to achieve in my website's gallery page
https://www.avivabaig.com/portraits
You can easily create your example site structure using bootstrap, visit this site for more info: https://www.w3schools.com/bootstrap/
.image-box img {
width: 100%;
height: auto;
object-fit: cover;
}
.image-box {
max-height: 235px;
overflow: hidden;
height: 100%;
margin: 50px 0;
}
<html><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body><div class="container">
<div class="row">
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=967&q=80" alt="">
</div>
</div><div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
</div>
</div></body></html>
My sketch of it, using the scripts and stylesheets for Bootstrap 4.0.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_078200849e0545229d2016399b977003~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_fb68b3206eea49008cf9b17fd8382041~mv2.jpg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/IMG-4811.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_01c000ce3450418ea4fcc20e3ed38a45~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
</div>
</div>
</body>
</html>
Above the complete file to copy/paste, below the snippet to run and test:
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
.col-sm-4 img{margin-top:20px;margin-bottom:20px}/* just to make the snippet clearer */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_078200849e0545229d2016399b977003~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_fb68b3206eea49008cf9b17fd8382041~mv2.jpg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/IMG-4811.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_01c000ce3450418ea4fcc20e3ed38a45~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
</div>
</div>
</body>
Check the options for the syntax, since you may even prefer to use a col-xs-4 class rather than col-sm-4 or other.
How do I do something like this with Bootstrap 4?
The easiest way:
<div class="row">
<div class="col-md-6">Card-1</div>
<div class="col-md-6">Card-2</div>
</div>
Or you can also use "flex"
<div class="d-flex justify-content-between">
<div class="">Card-1</div>
<div class="">Card-2</div>
<div class="">Card-3</div>
</div>
---OR---
<div class="d-flex justify-content-around">
<div class="">Card-1</div>
<div class="">Card-2</div>
</div>
.twoCard {
display: flex;
}
.cardPart {
width: 100%;
padding: 10px;
}
.cardPart2 {
border-left: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card" style="width: 18rem;">
<div class="twoCard">
<div class="cardPart cardPart1">Card Part 1</div>
<div class="cardPart cardPart2">Card Part 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I divided two part using flex css.
I have this Html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="d-flex">
<div>
<input type="text" class="input-text">
<p class="error">error message</p>
</div>
<button class="cursor pl-4">apply coupon</button>
</div>
If there is an error the button looks like in image!
How can equal the height of image even there is an error under input?
Use align-items: baseline on the according row, or align-self: baseline on the according element. Codepen.
align-self-basline or align-items-baseline would be the responsible classes in Bootstrap.
.flex {
display: flex;
}
.reset {
align-items: baseline;
}
<div class="flex reset">
<div>
<input type="text">
<p>Error</p>
</div>
<button>Button</button>
</div>
You can do these types of tricks for your requirement.
<div class="d-flex">
<div>
<input type="text" class="input-text"><button class="cursor pl-4">apply
coupon</button>
<p class="error">error message</p>
</div>
I want to put the content I have(for example image) in center of the row and column.
I tried using justify-content-center, or align-item and text-align: center, but none worked.
I need the image to be in center of the row. Like, if I have 4 columns, i need tohem to be centered on all 4 columns.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
</div>
</div>
</body>
</html>
You can use the following CSS on the images:
display: block;
margin: 0 auto
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 has new class which you can add with row class to center the content.
<div class="row justify-content-center">
!-- your content here --!
</div>
Hopefully will help you. This is also answered in similar question
Center Contents of Bootstrap row container
Just Add text-center class to each column you want its content to be aligned center.
<div class="col-xl-4 text-center">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
Here is the link to your code with this class added to every column.
Link