Enhancing Form Spacing with Bootstrap

I have been working on a form design, but I am now facing alignment issues. The problem is more noticeable on larger screens compared to smaller ones.

The main issues I am encountering include extra spacing in the social links section even though there are no visible padding or margins. Additionally, the form itself does not occupy the entire space as intended. I am unsure how to resolve these spacing issues. Can anyone provide some tips?

Here is the JsFiddle link containing the code: https://jsfiddle.net/Tsukiyono/aq9Laaew/283640/

For reference, here is another link displaying the layout on my gitpages:

Edit: An image of the desired layout can be viewed here.

body {
  background-color: black;
}
...
(remaining CSS and HTML code)
csstwitter-bootstrapbootstrap-4

Answer №1

When comparing JSFiddle and Github pages, the issue seems to stem from how bootstrap applies the col-md-6 class, particularly the flex-basis property.

Based on Chrome's element inspector, here is what I observed regarding their class: 

@media (min-width: 768px)
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

(In short, flex is a shorthand for defining flex-grow, flex-shrink, and flex-basis. More details can be found in this CSS-Tricks article: here and specific information about flex basis before that, here).

The root of the inconsistency appears to be the calculation of 50% as the value for flex basis between JSFiddle and Github pages. By setting both flex properties to flex: 0 0 auto on both platforms, I achieved consistent spacing. To address this, creating a custom class like .cust-col-md-6 with modified flex-basis as auto could be a solution: 

@media (min-width: 768px)
.cust-col-md-6 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 50%;
}

You can then utilize this custom class instead of .col-md-6 within your HTML code: 

<div class="col-12 cust-col-md-6 custom-social">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

javascriptjqueryhtmlcssasp.net-mvc

Safari iOS does not properly support responsive images when using srcset and sizes

I am facing an issue with the following code snippet: <img src="/img/footer/logo_white.png?v=2.0" srcset="/img/footer/logo_white.png?v=2.0 1x, /img/footer/logo_white2x.png?v=2.0 2x" > This ...

htmlcssresponsive-imagessrcset

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

javascriptjqueryhtmlcss

Looking to replicate a Modal that I designed, but unsure which elements need altering in order to achieve this. I am hoping to create three duplicates of the Modal

This modal is functioning perfectly, and now I want to replicate the same modal three times on a single page. I require three distinct buttons on the same page to trigger these separate modals. At this point, I am unsure which attributes need modification ...

javascripthtmljquerycssmodal-dialog

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

PHP Bootstrap Confirmation Dialog Tutorial

Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...

phpjavascriptjqueryhtmlcss

"jQuery enables hover effects to be applied to elements that are not directly related

I'm attempting to achieve an effect where an element will show or hide when I hover over a completely different element. Currently, my approach involves using lists and indexes so that the nth item in list 2 changes when the nth item in list 1 is hov ...

jqueryhtmlcsshover

Toggling jQuery to show or hide content depending on the selector

I am looking to implement a jQuery-based animation and here is the code I have so far: >items=document.querySelectorAll("#customers td span"); [<span alt=​" 02,Counter,11,2013-04-06 14:​59:​16">​ 02​</span>​, <span>​11 ...

javascriptjquerycsscss-selectors

Achieving perfect alignment of two images within a block and maintaining their center position even when resizing

While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved). As the page size decreases, I want the images to stack on top of e ...

htmlcsswordpress

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

It's time for a new challenge to push my learning curve. I've never ventured into the world of ajax before, but it seems like a skill I need to acquire. What better opportunity to learn than by implementing it on a fresh portfolio site. The main ...

jqueryajaxhtmlwordpresscss

Insert a variety of pictures into divs that share the same class

Can I target div elements with the same class in CSS and apply unique styles to each? Here is my HTML: <div class="image"><br/>a</div> <div class="image"><br/>b</div> <div class="image"><br/>c</div> ...

htmlcss

When I hover over the navigation bar, a submenu pops up. However, as I try to navigate to the submenu, I often end up accidentally selecting a different item on the navigation bar

I'm trying to find an answer but can't seem to remember where I saw it. Here's the situation: a horizontal nav bar with a dark blue selection and a red sub-menu. When the user hovers over a black arrow, it crosses into a light-blue nav item ...

cssreactjsnavigation

Is it possible for the carousel to display just one card when it is partially visible?

I recently built a carousel following the instructions provided in this link: However, when I tried putting it into a partial view, it didn't turn out as expected. Only one card is displayed on the carousel. https://i.sstatic.net/j6qNp.png ...

asp.net-corebootstrap-4

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...

javascriptjquerycssreactjs

Guide to center align fields in Ionic and Angular

I am working on creating a login screen that resembles the image provided. I have managed to set the background image, input fields, and buttons successfully. However, I am encountering a few issues: The width of my input field is taking up the entire spa ...

javascriptangularjscssionic-framework

Ways to align pictures in the center vertically when placed side by side

Can someone help me make the transition between tall and short images on my website smoother? I am not familiar with coding terminology, so please bear with me. The attached image provides a visual representation of the changes I am looking for: click he ...

htmlcssimage

Ways to extend div to fill the rest of the page's vertical space

Apologies, my search has yielded many results, but none that directly address my specific issue. It appears that there is a proliferation of div-height problems on this platform. :-( Here is the layout I am working with for testing purposes: <!DOCTYPE ...

javascriptjqueryhtmlcssheight

Text loaded dynamically is not remaining within the div

I am experiencing an issue with dynamically loaded content where Images work fine, but Links and Text are not displaying properly. For reference, you can view the problem in this JSFiddle: http://jsfiddle.net/HRs3u/1/ I suspect that it might be related t ...

jquerycssdynamicappend

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

My input HTML field is disabled, but I've noticed that in some browsers (such as Chrome, Edge, Internet Explorer, and Opera), it's still possible to select and copy the text. However, in Firefox, this functionality does not work. To test this yo ...

javascripthtmlcssangular

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

javascriptjqueryhtmlcss