Efficient utilization of the bootstrap form-group for optimal responsiveness

I've encountered an issue with the form-group class in Bootstrap.

You can view the problem on this link.

After analyzing the problem, I found that when viewing the code on a small or medium-sized device, the space between "Statut" and "Etat" appears smaller because I'm not using the form-group class.

You can see the difference here: https://i.sstatic.net/iefSD.png

However, on a medium or large device, the display is as expected.

Here is the result seen on a medium/large device: https://i.sstatic.net/ceZKu.png

When I insert 

<div class="form-group">

between "statut" and "etat", there is additional spacing added by the form-group class (a margin-bottom of 15px).

You can see the updated code and result here: link

However, in this case, the layout on medium and large devices shows an extra line. How can I fix this issue? It seems like I might be misusing a CSS class.

You can refer to the screenshot for better understanding: https://i.sstatic.net/xhHX9.png

htmlcsstwitter-bootstrap

Answer №1

Upon examining your JSBin, I identified several issues with your form, including incorrect usage of the form-group class. I also adjusted the classes to achieve the desired appearance that you seem to be aiming for. If all you wanted was an inline form across all views, simply avoiding a 12 span class would have sufficed.

I created a DEMO for you in a CodePen

p.s. The empty column div was unnecessary (unless it is used to dynamically display content using jQuery). Otherwise, the use of form-group effectively separates the label and input field into their own row.

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

Using html tags in JTextArea in Java is a simple process that involves setting

Is there a way to change the color of text in a JTextArea similar to how it can be done for JLabel or JButton? When I attempt to change the color using: textArea.setText("<html><font color=\"red\">Hi</font></html>"); The ...

javahtmlswingjtextareajtextcomponent

Header width does not fully occupy the available space

I'm working on a table that includes a div element for adding a header to it. <div class="table-responsive"> <table class="table"gt; <thead> <div class="topPic"><span><i class="fa fa-tree fa-2x"></i>< ...

htmlcssresponsive-design

Is it possible to modify the div id using C# code behind?

I have a division that looks like this: <div id="divAdditionalInfo" runat="server"> //html code here </div> In the back-end code, I want to display a small window (generated by this div) more than once. However, since it's the same div, ...

c#htmlcode-behind

Using @at-root seems to be causing an error when combining the "a" selector with

I encountered an issue when attempting to use @at-root and Interpolation in my Sass code. Despite using a standard example for testing, I still receive an error: .button { @at-root a#{&} { color: green; } } Error sass/Site.scss (Line 28 of s ...

cssrubywindowssasscompass

A few of the input fields I filled out are not getting sent to the PHP script

Currently, I am working on a school project that involves creating a website similar to IMDB. My task is to include comments in our database, but I am facing an issue where two fields (fid and spoiler) are not getting posted to the PHP script handling the ...

phphtmlpost

Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with: .flex-container { display: flex; justify-content: center; padding: 5%; position: relative; } .box1 { position: absolute; bottom: 0; width: 100%; height: 100%; } <div class="flex-container"> ...

htmlcssflexbox

``There seems to be a malfunction with the modal feature in the asp.net

Within my strongly typed view, I have a loop that iterates over a list of objects fetched from a database. Each object is displayed within a jumbotron element, accompanied by a button labeled "Had role before". When this button is clicked, a modal opens wh ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

The Hidden Div containing NicEdit is now shrunk down to a smaller size

Attempting to integrate the NicEdit editor for a hidden textarea stored within a div has presented some challenges. The goal is for the targeted textarea's parent div to be revealed upon the user clicking a button, with the textarea's width set t ...

javascriptjqueryhtmlnicedit

Strategies for eliminating all elements with a particular innerHTML content

function removeElements() { let li = document.getElementsByClassName("li"); for (var i = 0; i < li.length; i++) { if (li[i].innerHTML === "hello") { li[i].parentElement.remove(); } } } <li> <span class="li">hi</sp ...

javascripthtmljquery

What is the best way to relocate an image or link using CSS?

I've been attempting to adjust the position of this image using CSS, but no matter how many times I try, it just refuses to budge. Can someone please help me troubleshoot what might be causing this issue? #yahoo1 { position: absolute; top: 100p ...

javascriptcss

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

After creating my own custom Wordpress theme, everything seemed to be running smoothly. However, I soon encountered an issue where certain plugins were not functioning properly with the theme. It seems that the theme is unable to import the necessary style ...

phpjquerycsswordpress

Getting the input from an HTML editor and inserting it into a textarea using JavaScript

Currently, I am in the process of developing an HTML editor for a project. I have downloaded a program online that I am attempting to customize according to my requirements. However, I am encountering difficulties when trying to retrieve the inner HTML of ...

javascriptphpjqueryhtmlrich-text-editor

Shopping Cart implemented in PHP

Looking for help in PHP to create a shopping cart? If you're experiencing products disappearing once the user leaves the cart area, here's what you can do: <?php foreach($almofadas as $item):?> <form action="cart.php&quo ...

phphtmlmysqlmariadb

Restricting choices once user selects an option (HTML)

Currently, I am faced with a dilemma regarding two sets of options for an HTML form. One set consists of various units (such as cm, in, ft.), while the other set includes different locations. The selection of a unit would restrict certain location option ...

htmlcssflask

Grammarly is seamlessly inserting padding into my body element

After setting up my website on GitHub, I ran into an issue where the Grammarly Chrome extension was automatically adding a padding-top attribute to the body tag. <body data-new-gr-c-s-check-loaded="14.1028.0" data-gr-ext-installed="" ...

htmlcsstwitter-bootstrap

struggling to update an array with user inputs on my to-do list app

I'm currently in the process of creating a small to-do list with some specific functionality. I want each text input (or a copy of it) to be added to an empty string, ensuring that the original input remains unchanged. The goal is to have a function t ...

javascripthtml

Tips for managing content size in the Bootstrap column system

I am facing an issue with my bootstrap grid setup. I have a card with an image inside a column, but the card does not occupy the full width of the column. How can I fix this? View current state of my column I've experimented with adjusting the width ...

htmlcssbootstrap-5

Navigate to the end of a container

Is there a method to automatically scroll to the bottom of a div when the page is loaded? I have attempted several solutions without success. If you have any insights, please share them. Thank you! ...

javascriptjqueryhtmlcssscroll

Implementing a Dynamic Navigation Feature using PHP in a Standalone File

I am currently working on creating a dynamic PHP navigation system that should highlight the active tab, but I'm facing challenges with making the active tab part function properly. While there are simpler methods available, they all involve incorpora ...

phphtmlcss

Is it acceptable to place a <figure> tag inside a <header> tag within an <article>?

Imagine having this scenario: <article> <header> <h1>Article title</h1> <p>Article kicker</p> <figure> <img class="featured-image" src="http://article.com/featured/image. ...

htmlsemantic-markup