Trying to align a radio/checkbox text on top and centered of the input using the latest version of bootstrap (v4 beta 3). The radio/checkbox seems to be two parts: .custom-control-label::before and .custom-control-label::after, making it challenging to figure out how to adjust the position of input or text.
You can view a demo in this plunker link if you want more info
If you are utilizing Bootstrap, it is important to adjust the positioning of the pseudo-elements accordingly.
Simply add the following CSS code:
.custom-control-label::before,
.custom-control-label::after {
top: 1.5rem;
left: calc(50% - -.25rem)
}
Here is a plunker for reference.
UPDATE
To accommodate multiline labels, you can implement the following adjustments:
.custom-control-label {
display: flex;
flex-direction: column-reverse;
align-items: center
}
.custom-control-label::before,
.custom-control-label::after {
position: relative;
order: 0;
}
.custom-control-label::after {
order: -1;
/* Specify the height of the ::after element */
transform: translateY(-1rem);
}
Creating my personal academic website involves multiple pages that share a common structure. Question: I'm searching for a method to avoid duplicating the header and menu code in each HTML file. Is there an approach where I can store the code for the ...
I'm attempting to create a button (div with background color) positioned just below an image that aligns with the right side of the image. Both elements are contained within a wrapper div. When I float the button to the right, it causes the wrapper di ...
As I try to avoid using HTML tables whenever possible, I've turned to CSS tables instead. But now I'm wondering if there's an equivalent of colspan in CSS tables. This is the CSS code I currently have: #fleetTable{display: table;width: 360 ...
I'm currently attempting to expand my bootstrap carousel to cover the entire width of the page as I believe it will provide the best visual impact. However, despite looking up solutions and trying various methods, nothing has seemed to work so far. If ...
Can lines be added to an HTML textarea for a notebook paper-like effect? I'm thinking something similar to this: ...
Similar Question: jQuery animate backgroundColor I am looking to make a div shine or switch colors to signal to someone that they have gotten a message. What is the best way to animate the background color of a div for this purpose? ...
Despite setting autocomplete to off in my form, modern browsers tend to override this. An issue arises where the border of a user's input field remains intact when they manually type their name, but is removed when the browser autofills it. https://i ...
After spending all day researching flexbox and vertical align, I still can't figure out how to align an image to the right in my bootstrap column with text wrapping around it on the left. Check out what I've tried so far here: https://codepen.io/ ...
I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the chang ...
Consider this situation: Below is the code that shows all user accounts. <table border="3px" align="center" cellspacing="3px" cellpadding="3px"> <tr> <td>Username</td> <td>Password</td> <td><a href="" oncli ...
In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...
This is a piece of code that enables playing videos in floating windows using Bootstrap. However, I am looking to enhance the functionality by dynamically changing the video source using JavaScript. I tried using onClick() to modify the src attribute of th ...
I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might ...
I have a bootstrap row with a heading and an input field. Here is my code: <div class="row mb-5"> <div class="col h1 text-white text-start text-center text-md-start text-lg-start">Welcome<input class="for ...
I am having an issue with a button on my webpage. When clicked, a pop-up dialog box appears, but it is not centered on the current screen - I have to scroll up to view it and close it each time. I want the pop-up to appear in the center of the current scre ...
Imagine having two monitors: one 15.5 inches with a resolution of 1920 x 1080 and the other 24 inches with the same resolution. The first monitor has a pixel density of around 72 PPI, while the second has around 90 PPI. If I apply a media query in CSS for ...
Is it possible to have an HTML element like a span or div on the page that occupies no space? I want to be able to toggle its visibility without affecting the layout, such as having a label appear next to a table row when hovered over without taking up e ...
I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. How ...
Currently, I am working on a Bootstrap website that is supposed to be a one-page site with a navigation bar at the top. However, I am facing an issue where the navbar is sticky only for the first section and then disappears as I scroll down. How can I make ...
Having an issue with the flex-direction: column property in responsive mode. When applying flex-direction: column to the .container, it does not behave responsively like flex-direction: row; instead, it overflows the layout. How can I resolve this? & ...