Trying to implement the Bootstrap 4 login form available at:
Currently troubleshooting two issues with this form:
To complete the setup, simply include the following CSS code:
html,body,.container,.row {
height: 100%;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
align-items: center;
display: flex;
}
.card.card-signin.my-5 {
background-color: rgba(255, 255, 255, 0.6);
}
"Is there a way to vertically center this card in the middle of the screen? I've tried different combinations with vertical-align but it keeps showing up at the top." Remember, vertical centering is relative to the height of the parent element.
If the parent element does not have a defined height, none of the vertical centering solutions will work!
Now let's look at vertical centering in Bootstrap 4...
You can utilize flexbox and size utilities to make the container full-height and set it to display: flex. These options do not require additional CSS (except for ensuring the height of the container like html or body is set to 100%).
Option 1: align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm centered vertically
</div>
Link to example
Option 2: align-items-center on flexbox parent (.row is display:flex; flex-direction: row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm centered vertically
</div>
</div>
</div>
Link to example
Option 3: justify-content-center on flexbox parent (.card is display:flex;flex-direction: column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
Link to example
A different approach to transparency involves applying the following CSS style.
.container-content {
backdrop-filter: blur(3px) brightness(90%);
}
Check out this CSS snippet!
.panel {
background-color: rgba(255,255,255, 0.2) !important;
}
I'm struggling to line up all the menu items at the bottom - products, activity feed, and learn store should be on the same row, with test below products. Currently, products is being pushed up and text is aligning to the right of it. Despite trying ...
As I parse an uploaded XML file with the dom, the generated string combines the hostname and osname values separated by a , delimiter. The variable s holds this string which is then sent back to HTML using the response.getWriter object obj. However, instea ...
One thing I noticed is that when placing an absolutely positioned element within a relatively positioned element, the latter does not automatically inherit the width and height of the former unless manually set. Take this example: <!DOCTYPE html> ...
New to this forum and looking forward to receiving assistance and making some fantastic connections! Currently working on my personal portfolio with the goal of getting it online for job hunting purposes, but encountering some challenges along the way. T ...
Recently, I embarked on a project to enhance the functionality of restaurant table items and implement value-saving features. Initially, everything worked smoothly with one item list. However, upon introducing a second list and attempting to manipulate it ...
Looking to create a photos grid layout similar to Facebook using angularjs and bootstrap. Came across the angular-masonry plugin which seems like it could work. Here are some sample layouts I'm aiming for: https://i.sstatic.net/6NdNW.png https://i.s ...
Is there a way to use PHP to extract an HTML table from a website? References: The table I want to parse can be found here: This is the code I attempted to use: <div class="row"> <div class="col-md-8"> <h1>Standings</h1 ...
On a webpage, I have a standard table/th/tr/td setup that presents tabular information. The columns can be rearranged: product|price|date price|product|date date|product|price ... and so forth. However, the original order remains consistent for each disp ...
While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...
[resolved] I'm encountering an issue with the code below that is supposed to dynamically change the options in a second drop-down menu based on the selection made in the first menu. I've tried to troubleshoot the problem but haven't been suc ...
Seeking guidance on creating a card-based game inspired by Game of Thrones, similar to yu-gi-oh. While experienced in Java, C, C++, I am new to HTML and its libraries. Any advice on which libraries or methods to utilize would be greatly appreciated. I aim ...
Whenever I try to access index.php, it loads perfectly the first time, but I encounter an issue when trying to navigate to another page from the index page. Error: Object not found! The requested URL was not located on this server. The link on the ref ...
Looking to manipulate a <div> element that includes both HTML elements and text? You're in luck. I need to locate and remove either the last, nth-from-last, or nth plain text section within it. For example: <div id="foo"> < ...
Is there a way to ensure that the two buttons align properly within their parent div, which has a fixed width defined as either a specific number or percentage? A visual representation of what I am seeking can be viewed in the image below: https://i.sstat ...
https://i.sstatic.net/ni3vf.pngAfter tinkering with code from three different individuals to create CSS arrows, I fear I may have overcomplicated things. Is there any CSS expert out there who can help me streamline this? I'm struggling to adjust the p ...
Using jQuery, I have created these dynamic tabs. My approach involves selecting the first element, nav + tab content. HTML <div class="col-lg-12"> <div class="tabs-container"> <ul class="nav nav-tabs sys ...
Currently, I am utilizing the Bagging Tree method (Bootstrap Aggregation) for classification purposes and assessing its misclassification error rate in comparison to a single tree. I find it perplexing because while the function estim.pred generates a fac ...
In one of my divs, the CSS is set to have display: none .cookie_policy { color: white; text-align: justify; width: 50%; margin: 2% 25%; line-height: 20px; display: block; font-family: Arial,Helvetica,sans-serif; font-style: italic; display:none; } <div ...
I'm having trouble displaying a splash screen on my web app for iOS devices. Upon launching the app from the home screen, I only see a white screen with no content loading. Interestingly, if I rearrange the meta tags to be below the icons and splash s ...
My website has a specific set of <p class="first"> elements that change background color on hover using CSS. <div id="row_1"> <p class="first">first_1</p> <p class="first">first_2</p> <p class="firs ...