Hello there stackoverflow
I've been attempting to align those images in the center. I've tried all the suggestions I could find about vertically centering in bootstrap.
http://jsfiddle.net/tLd85urn/41/
You can view my source code here. When I remove the "div" and "html" lines in the CSS stylesheet (height: 100%;), the images appear centered, but then the entire page loses its fullscreen layout. Is there a way to center those images while maintaining the "fullscreen" design?
html,
body {
height: 100%;
/* If I remove this line, it works, but it's no longer fullscreen */
width: 100%;
margin: 0;
}
div {
height: 100%;
/* If I remove this line, it works, but it's no longer fullscreen */
/*width: 100%; */
margin: 0;
}
.header {
height: 10% !important;
}
.content {
height: 80% !important;
}
.footer {
height: 10% !important;
}<div class="container-fluid">
<div class="row header text-center align-items-center align-middle">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-6" style="background-color:lavenderblush;">.col-lg-8</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
</div>
<div class="row content text-center align-items-center align-middle">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1" style="background-color:lavender;">.col-lg-1</div>
<div class="align-items-center align-middle col-xl-10 col-lg-10 col-md-10 col-sm-10 col-10" style="background-color:blue;">.col-lg-10<img src="test2.png" class="align-items-center align-middle img-fluid rounded mx-auto" alt="Responsive image"><img src="test2.png" class="img-fluid mx-auto" alt="Responsive image"><img src="test2.png" class="img-fluid mx-auto" alt="Responsive image"></div>
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1" style="background-color:lavender;">.col-lg-1</div>
</div>
<div class="row footer text-center">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-6" style="background-color:lavenderblush;">.col-lg-8</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
</div>
</div>In the end, I'd like it to look like this:
Thank you for your assistance and best wishes,
Tine