Struggling with aligning images vertically in a bootstrap column. When not using the bootstrap column, the image centers perfectly. How can I achieve vertical centering within bootstrap columns? Any suggestions would be greatly appreciated!
Currently, this is the CSS code I have for centering the image:
.image-container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
Check out my plnkr here: https://plnkr.co/edit/t3gOUyBxEFSMa3cwNRiY?p=preview
Instead of utilizing
transform: translate(-50%, -50%);
Use
transform: translateX(-50%);
Additionally, you assigned a class col-lg-8 to the body with the position set to relative. By changing the position to 'initial', you will achieve vertical alignment for the image.
.col-lg-8 {
position: initial !important;
}
.image-container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
img {
width: 100%;
}
.col-lg-8 {
position: initial !important;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="SupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" >Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<body class="col-lg-8">
<div class="image-container">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHgA1QMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAFAAIDBAYBB//EADoQAAIBAwMBBgQEBgEDBQAAAAECAwAEEQUSITEGEyJBUWEUcYGRMkKh0SOxweHw8VIHQ2IVJHKSwv/EABoBAAIDAQEAAAAAAAAAAAAAAAMEAQIFAAb/xAAkEQACAwACAgIDAAMAAAAAAAAAAQIDERIhBDETQQUiUSNxgf/aAAwDAQACEQMRAD8A9JFOGfSnKoqVVFOchTBiinBadwKQqNJwYV5p6pTgBSNRp2ImhOyp+/A86qDOKacfm4qrimXU2i78Qo68/KheoXJRSyl1/wDL0rk0yIMFwvzPWhl5cqVIWYgeeG4/agWTrr9sYrrss9IH3XaaWzm2SklTz3g5X65qnPrrW0nfW5/hOCyqPIjqM/qKAa3cZklhYFA2WXPGfkRUWl79qx3Qzg+E+TDy+uMis+3z1FdGjV4Dk+zR6n2naGecttBXEqY+Q/nj9an0Ltla2+hh5pQZ2fZGpI5xxXn/\b
If you are using Bootstrap 3 or above, simply apply the .text-center class for center-aligning text. Alternatively, you can use the .image-container class with the inline style attribute text-align:center;.
.image-container {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<body class="col-lg-8">
<div class="text-center">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3N...nVtG4KL6OAwz86gm1C7hUl5I+mPCxGfmMVAbeRbhmLfxS2WJA5qrqMLzR5bJGPXAb9a815F3yWZ9HqPHp+OvsbNczSsGuFYxA/jP5acb34TMDvgA5Vs84qqsjWcBPKpjG2Q7l/cVQjtrzUVMlvZvsVsrjlR9PShcFL36GOXD/Y3Uro3qbJBwmcH9vrQbToCl60oU4AwuR0PlWnstKuImWe8TbCJM7Dxjjg49jVqUWoDx2JX4iUDHGdx8/lRo..." />
</div>
</body>
</html>My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...
It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...
There is a division element containing text: <div style="white-space:nowrap;overflow:none;width:50px;"> With some text in it </div> Is there a way to adjust the font size of the text within the division so that all of the content is display ...
I have an image (https://i.stack.imgur.com/v71LR.png) and I'm trying to achieve a similar layout. Currently, my approach involves using two divs - one for the left column (containing the image) and one for the right column (with heading and paragraph ...
My attempt to address the white space issue caused by a navbar I created led me to try using overflow:hidden. The navbar is generated using the Header component, and I desired for it to have a position: sticky attribute. However, I realized that I cannot ...
Operating on React with Material-UI, my web app features a bottom nav bar. For certain devices like the latest iPad, I must allocate an additional 8 pixels below it to account for the horizontal gray bar that substitutes for a home button: https://i.sstat ...
Recently, I started working with Express and Bootstrap. While attempting to create a login form that triggers a POST request to the server, I encountered an issue where the page displays "The page isn't working" instead of loading a new HTML page. He ...
Back in April 2012, Google's Chart Image API became deprecated but it was possible to generate QR codes using it. Although I know that I can adjust the size of the image produced by the API, I prefer to simply use CSS along with the width and height ...
In my database, there is a table that shows the parent-child relationship. Check out this link for more details The HTML structure of the table is as follows: <table> <tr class="parent_row"> <td >1</td> <td>2</t ...
My goal is to align the text underneath each image and center the buttons below them. I've tried adjusting paddings and margins, but it's not solving my issue. Can someone confirm if I am correctly using the button and figcaption tags? fig ...
I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...
There's a peculiar bug I'm encountering which results in extra spacing on the body or html element. This additional space isn't visible within the normal browsing area of most browsers, only becoming apparent when scrolling to the right side ...
I recently created a website at . When I view this website on Google Chrome using the device toolbar to simulate landscape mode on mobile, the navigation menu works perfectly. Bootstrap adjusts the height of the navigation div and allows for scrolling. In ...
In my <ul>, each <li> contains an image. I want these images to scale and become opaque upon hover. However, the issue is that when they scale, they get covered by the following image. Unsure if the z-index is correctly placed... Below is the C ...
I recently created a multiselect dropdown menu using Bootstrap Multiselect. I successfully set a limit on the number of options that can be selected (in this case, 5), and once the limit is reached, the additional options become disabled. Everything works ...
I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value. However, I'm running into some difficulties. I can' ...
This JSP code uses Bootstrap5: <form action="" method="GET" class="row g-1 mb-3 "> <div class="col-lg-2 col-md-4 col-6 mb-2"> <input type="date" class="form-control" name=" ...
I have been working on a new feature that involves highlighting a div in a specific color and changing the mouse pointer to a hand cursor. I successfully achieved this by adding a CSS class: .changePointer:hover { cursor: pointer; background-color ...
Click here to view the fiddle. I am attempting to create a glowing effect on a textbox using onFocus in the input tag. The goal is to make the textbox glow when it is clicked and the border changes color. I have tried writing JavaScript code, but unfortuna ...
I recently implemented a carousel with indicator buttons from daisyUI in my Nextjs application. Unfortunately, I noticed that when clicking on an indicator button, not only does it switch slides but it also scrolls the page so that the top of the slide ali ...