In bootstrap 4 provide many new classes by those classes we can easily place an object or image into the center of the page. Here we use an image called flower.jpg for example.
set the image under a div:
Create a div and placed the image into it. Image size must be changed accordingly to your monitor size. Or you can use .img-fluid.
Horizontally center the image:
Now, we use the bootstrap 4 class .justify-content-center to place the image horizontally center on the web page. This class is applying on the created div. This class set the contents alignment horizontally center.
Vertically center the image:
Secondly, we use another bootstrap 4 class .align-items-center to place the image vertically centered on the web page. This class is also applying on the created div. This class set the contents alignment vertically center.
<html>
<head>
<title>Place Image At The Center of the page</title>
<!-- Link the Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<div>
<div class="row h-100 justify-content-center align-items-center">
<img src="flower.jpg" class="img-fluid">
</div>
</div>
</html>
Video Tutorials
