Is there a way to assign "label 3" with the identical percentage as "label 1" on this particular form?

I'm currently using Bootstrap 4 for my project.

I want to adjust "label 3" to have the same width as "label 1," while keeping the input width and the rest of the page intact (as shown in the code).

Is this possible to achieve?

Thank you.

https://i.sstatic.net/faBgp.jpg

<div class="form-row">
<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 1:</label>
<div class="input-group col-6">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>

<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 2:</label>
<div class="col-6">
<input class="form-control" placeholder="Enter text" type="text">
</div>
</div>
</div>
</div>      

<div class="form-row">
<div class="col-12">
<div class="form-group row">
<label for="name" class="col-3">LABEL 3:</label>
<div class="input-group col-9">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>

cssformstwitter-bootstrapbootstrap-4

Answer №1

To improve the layout, instead of placing a row next to form-group, insert another div with a form-row. Try this structure:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-row">
  <div class="col-6">
    <div class="form-group">
      <div class="form-row">
        <label for="name" class="col-6">LABEL 1:</label>
        <div class="input-group col-6">
          <input type="text" class="form-control" placeholder="Enter text">
        </div>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="form-group">
      <div class="form-row">
        <label for="name" class="col-6">LABEL 2:</label>
        <div class="col-6">
          <input class="form-control" placeholder="Enter text" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="form-row">
  <div class="col-12">
    <div class="form-group">
      <div class="form-row">
        <label for="name" class="col-3">LABEL 3:</label>
        <div class="input-group col-9">
          <input type="text" class="form-control" placeholder="Enter text">
        </div>
      </div>
    </div>
  </div>
</div>

I believe the main issue lies in the padding of the row, so I have reorganized it by segregating row/form-row elements accordingly.

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

What is the reason for the absence of absolutely positioned elements in the render tree?

Recently, I came across some information about the render tree: As the DOM tree is being created, the browser simultaneously generates a separate tree known as the render tree. This tree consists of visual elements arranged in the order they will ap ...

javascripthtmlcssgoogle-chromebrowser

Playing with background hues

Can anyone help me with this issue? I've been attempting to change the background color using jQuery upon document load, but it doesn't seem to be working. Any thoughts on what I might be doing wrong? http://jsfiddle.net/KczZd/2/ HTML: <d ...

javascriptjqueryhtmlcss

Assigning a unique identifier to a button that will vary depending on the selected radio input

UPDATED HTML: The circumstances have changed because I am no longer in my office, but the concept remains unchanged. The situation is that on a certain part of a website, users have the option to choose from multiple saved addresses. Each address has a un ...

javascriptjqueryhtmlformsdynamic

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

htmlcss

Tips for arranging cards in columns without causing vertical scrolling to be triggered

I am working with Bootstrap 5 and have created a column with multiple cards: https://jsfiddle.net/fzxc1v69/ Currently, all the cards are displayed one below the other, but I want them to be lined up horizontally instead. In my code, the .section class i ...

htmlcssbootstrap-5

Is it possible to filter JavaScript Array while ensuring that select options do not contain duplicate IDs?

I am utilizing two datatables with drag and drop functionality. Each row in the datatables contains IDs. When I drag a row from table 1 to table 2, the data is stored in an Array. I have an addArray function that pushes the IDs into the Array, filters out ...

javascripthtmljquerybootstrap-4

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

htmlcssangulartypescript

Central alignment of div with cursor

I'm experimenting with creating a unique custom cursor using a <div> that trails the movement of the mouse pointer. While the current setup works smoothly, I've noticed that when scrolling down the page, the div lags behind until the scrol ...

javascriptjquerycsscursor

Bootstrap Scrollable Card

Currently, I am working with bootstrap 4 and have set up a layout with 3 columns in a single row. One of the columns contains a list while the other two do not. I am trying to make only the column with the list scrollable without affecting the entire conta ...

cssbootstrap-4

What could be causing the unexpected text display in my shiny app despite using html tags and bootstrap?

Here is a simple example that illustrates the error I am experiencing: library(shiny) run_with_enter <- ' $(function() { var $els = $("[data-proxy-click]"); $.each( $els, function(idx, el) { var $el = $(el); var $proxy = $("#" + $el.data("proxyCl ...

javascriptrshinybootstrap-4shinyjs

Do not insert a MUI divider after the final item in the menu

Is there a way to remove the divider after the last category when using MUI components and adding a divider after each category? https://i.sstatic.net/Gx0Zb.png This is my code with the divider right at the bottom before the closing tag. export const ...

cssreactjsmaterial-ui

Refresh the JavaScript graph with new data from the AJAX request

Seeking assistance in updating my javascript chart data using ajax data retrieved from a database. The specific chart being referenced is an apex chart. After submitting a form via ajax, the returned result is as follows: type: "POST",crossDomain ...

javascriptajaxforms

Troubulating with overflow-y: scroll functionality? Follow these steps to troubleshoot

I've been working on a project involving the .menu-scroll class, which is a div within a <ul> list. I want this div to display a scroll bar when it exceeds its height limit. However, instead of achieving this, it keeps pushing down the .menu-foo ...

htmlcss

Samsung mini devices experiencing issues displaying Unicode symbol (25be)

I'm currently facing an issue with an iconfont that I have included in my website. I am using Unicode symbols for the characters of the icons, and most of them are displaying correctly. However, there are a couple that are showing up as blank on the s ...

androidcssunicodeicon-fonts

Is there a bug with Kendo UI? The Kendo grid pager seems to be misaligned with the bottom

Recently, I've been experimenting with Kendo UI and encountered a specific issue: The pager for my Kendo grid is not aligning properly at the bottom of the grid. Although I've attempted to adjust the CSS styling for k-grid-pager, the issue persis ...

csskendo-uiframeworkskendo-grid

CSS experts caution that the addition of margin and padding can cause the screen to jump

When I apply margin and padding to this class, it starts glitching like in the second GIF. However, if I remove margin and padding everything works fine, but I do need them for styling purposes. What could be causing this issue and how can I resolve it? ...

htmlcss

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols. My prefe ...

cssfonts

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

"Enhance your webpage with a captivating opaque background image using Bootstrap

I'm new to exploring Bootstrap and I am currently experimenting with options for displaying content with a semi-transparent background image. Currently, I am using a "well" but I am open to other suggestions. I have managed to place the image inside t ...

javascriptjqueryhtmlcsstwitter-bootstrap-3