×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap 4 new feature in column System
Place an image at the center of a page - Bootstrap 4 - Bootstrap 4
4885    Arnab De    07/09/2017

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:

softetechnologies

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.

softetechnologies

<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

Bootstrap 4 new feature in column System
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Sri Sri Ramakrishna Paramahamsa
The world is needed a mixture of truth and make-believe. Discard the make-believe and take the truth.
Sri Sri Ramakrishna Paramahamsa
28832
52.78
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     42033
01/01/2018     36004
28/06/2017     34089
25/06/2018     33448
02/08/2017     32401
01/08/2017     26868
06/07/2017     26791
15/05/2017     26418
14/07/2017     21855
21/04/2018     20717
softetechnologies