Looking to enhance the visual appeal of my form controls, I am using Bootstrap 4 horizontal form to eliminate unnecessary spacing and create a more compact layout. Though I have applied the CSS snippet below to reduce spacing, there is still a noticeable gap between labels and inputs that I can't seem to get rid of.
.form-group {
margin-top: 0;
margin-bottom: 0;
}
Utilize !important to avoid being overridden:
.form-group {
margin-bottom: 0px!important;
}
Alternatively, incorporate bootstrap 4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<div class="form-group mb-0">
As an illustration:
.space .form-group {
margin-bottom: 0px!important;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-grou">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<h1>With space</h1>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder= "Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</form>When working with Bootstrap, keep in mind that the .form-group class has a default margin-bottom setting:
The default behavior only includes applying margin-bottom.
Visit the official Bootstrap documentation for more information on form groups.
If you're using a precompiled version of Bootstrap, make sure to override this default setting by using a stronger selector (utilize proper cascading techniques).
For those compiling Bootstrap from scratch, simply adjust the $form-group-margin-bottom variable to your preferred value (e.g., 0).
My solution involved the addition of
label {
margin-bottom: 0;
}
The issue has been fixed and everything is working smoothly.
I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...
I need help aligning the inputs in my form to match the image provided https://i.sstatic.net/AXhlp.png. I attempted to center the div using <center>, but I am unsure how to properly align the elements based on the image reference. <center> ...
I've been diligently working on a website for some time now, conducting the majority of my testing in Chrome, Firefox, and IE. However, as I near completion, I've run into an issue when viewing the site in Safari on Mac, iPad, and iPhone. I' ...
The initial div in the code snippet below showcases the name of a university. When this name is clicked, it activates the function display_people(). This function is responsible for displaying or hiding the individuals associated with that university. The ...
I have encountered numerous posts on this topic, but none of the solutions provided have worked for me. I must admit that I struggle to grasp CSS concepts, although I am making an effort to learn. Here is the code I am currently using: <!DOCTYPE html& ...
For my email signature, I currently have an HTML coded design that includes a 400x415 dashed line with specific color specifications. However, Outlook Express 2016 is unable to display this element properly. Despite using inline CSS, it appears that CSS d ...
As a developer who is familiar with print design but new to web design, I have a designer assisting me in this transition. While I don't need tips on design or usability, I am eager to learn about the step-by-step process of coding a webpage. I want t ...
Struggling with customizing my WordPress theme, I need to rearrange the elements in the footer section of my website . Currently, the contacts are displayed above the Facebook widget, but I want them below it. I've attempted adjusting the position and ...
As someone who doesn't work on front-end tasks frequently, I have encountered an issue while creating a navbar using Bootstrap. The problem arises when trying to add multiple buttons as it causes the spacing between them to appear strange. Does anyon ...
Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...
Check out the button design linked below: I attempted to recreate this design using before and after, but I want the arrow to be softer. I tried skewing it as well. I also searched for references, but couldn't find similar examples online even though ...
In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...
One interesting feature of our whiteboard application is that Chrome users have the ability to highlight the entire canvas by dragging their mouse in a specific manner: Do you have any suggestions on how we can prevent this behavior? Thank you! ...
When I access my website from Chrome on Android, I am prompted to "Show Simplified View" at the bottom of the screen. Clicking this prompt results in only one news item being displayed instead of the intended 25, controls removed, and scrolling disabled. O ...
Is there a way to specifically target the nested li elements in my css selector? Check out the Demo li:first-child { background-color: rgb(236, 236, 236); list-style-type: none; margin-bottom: 3px; padding: 8px; } <ul> <li& ...
Can someone please explain how to adjust the .row width in Bootstrap so that the col grid still functions correctly, but certain .rows are tighter than default? Thank you. ...
My attempt at modifying the background color of my HTML email template has been focused on changing the sidebar's white color, rather than altering the background of the email body itself. This is the CSS code I have: @import url('https://fonts. ...
I created a kaboom.js application and I'm having trouble setting a background for it. I've searched online extensively and attempted different methods on my own, but nothing seems to be working. (StackOverflow flagged my post as mostly code so I ...
In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...
Here is a snippet of code to consider: $(function() { $('#item').css({ webkitTransform: 'translate(100px, 100px)' }); }); The element I am attempting to move has the following CSS properties: transform: translate3d(0 ...