Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi | Bootstrap 5 Align Content Class. Earlier I have shared a Bootstrap 5 Tutorial In Hindi | Bootstrap 5 Vertical Alignment Class. and now it’s time to Bootstrap 5 Tutorial In Hindi | Bootstrap 5 Align Content Class.
In this tutorial, You will learn full Bootstrap 5. I will give all the part here and if you want to go deep in the tutorial so you can watch the full video which is I like below Hope it will help you all thank for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Align Content Class.. Bootstrap 5 Tutorial In Hindi You can learn what is bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
How to Align content vertically inside a div in Bootstrap 5
In this short post, lets see how simple it is to vertically align content inside a DIV.
Align / Center content Vertically
Aligning content to the center of the DIV is very simple in Bootstrap 5, You just have to convert the div into a flex box using d-flex class property and then use the property align-items-center to vertically align the content in the middle of the div.
Content in the center of the DIV – Vertiaclly and Horizontally
We can now make use of another flex box property justify-content-center of Bootstrap 5, which will help to align content in the center of the div horizontally.
Responsive variations also exist for align-items.
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-items-sm-start.align-items-sm-end.align-items-sm-center.align-items-sm-baseline.align-items-sm-stretch.align-items-md-start.align-items-md-end.align-items-md-center.align-items-md-baseline.align-items-md-stretch.align-items-lg-start.align-items-lg-end.align-items-lg-center.align-items-lg-baseline.align-items-lg-stretch.align-items-xl-start.align-items-xl-end.align-items-xl-center.align-items-xl-baseline.align-items-xl-stretch.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch