How can you make a form group expand within a container in Bootstrap 4?

After experimenting with the paddings, I still couldn't resolve the issue at hand.

The goal is to extend these fields all the way to the right side.

Check out the Fiddle for comparison between the current appearance and the desired look.

The styling for the form inputs and labels can be found below:

  • Adjust the margin for input[type='text'] and .txtarea to 3px.
  • Set the height of .form-group input and select to 36px with specific padding.
  • Ensure .form-group has a bottom margin of 2px and zero padding on both left and right sides.
  • Define the styling for labels including color, font-weight, font-size, width, and alignment.
  • For the structure, maintain a container-fluid width of 99% to cater to the content.

Here is the HTML structure for the form within the container div:

Some Hidden Logo

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Removing the px-5 on your container, which sets 3rem padding on the left and right, is the first step. This is necessary because the container-fluid class already provides padding of 15px on both sides.

Next, as you inspect the elements, you'll find additional default padding on all col-4 elements. To target only the padding-right and set it to 0, you can utilize the pr-0 class.

input[type='text'],
.txtarea {
  margin-bottom: 3px;
}

.form-group input,
select {
  height: 36px;
  padding-left: 03px;
  padding-right: 03px;
}

.form-group {
  margin-bottom: 2px !important;
}

.padding-0 {
  padding-right: 0;
  padding-left: 0;
}

label {
  color: #292727;
  font-weight: bold;
  font-size: 13px;
  width: 140px;
  text-align: right;
}

label[for='notes'] {
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  display: block;
}

.container-fluid {
  max-width: 99%;
}
<html>

<head>
  <base target="_top">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid" id="container1">
  <div class="row d-flex flex-wrap align-items-center">
    <div class="col">
      <img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
    </div>
    <div id="unitSpot" style="display: none;">Fabric</div>
    <div class="col">
      <form id="headerForm">
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="select" class="col-4 col-form-label">Order:</label>
          <div class="col-4 pr-0">
            <select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
              <option value="TTL-220218" selected="">TTL-2131231</option>
            </select>
          </div>
        </div>
        <div class="form-group row" style="display: flex;justify-content: flex-end;">
          <label for="fabricPo" class="col-4 col-form-label">PO:</label>
          <div class="col-4 pr-0">
            <input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
          </div>
        </div>
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="poDate" class="col-4 col-form-label">PO Date:</label>
          <div class="col-4 pr-0">
            <input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
          </div>
        </div>
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
          <div class="col-4 pr-0">
            <input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
          </div>
        </div>
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="text3" class="col-4 col-form-label">Ship Date:</label>
          <div class="col-4 pr-0">
            <input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

</html>

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 managing nested data in Angular 4 using a Bootstrap 4 data-table

I am currently using the Data Table from a GitHub project found at: https://github.com/afermon/angular-4-data-table-bootstrap-4-demo. It works perfectly with data structured in a key-value format like the sample provided. However, I am facing challenges wh ...

angulardatatablebootstrap-4

What is the best technology to implement for a band website design?

I'm in the process of creating a website for my friend's band, and I need some creative input. The site will feature minimal content such as a bio, news, and embedded audio/visual material. While my web development skills are decent, I'm loo ...

javascriptjqueryhtmlcsssilverlight

Ajax is encountering issues retrieving the content

I'm a beginner when it comes to working with ajax. I attempted to compile this simple code, but for some reason it's not fetching the contents of the file. This is the code I'm using: <!DOCTYPE html> <html> <head> <scr ...

jqueryhtmlajax

Avoid automatically scrolling to the top of the page when a link is clicked

Within my ASP.NET MVC 5 application, there exists a partial view containing the following code: <a href="#" onclick="resendCode()" class="btn btn-link btn-sm">Resend</a> Additionally, on the View, the resendCode() function is present: funct ...

javascripthtmlasp.net-mvc

the menu didn't glide into view

I'm currently working on implementing a stylish menu For this project, I am following a helpful guide that instructs to create the HTML in a single file. The issue is that the menu isn't sliding smoothly as expected. Here is the HTML code - no ...

jqueryhtmlcssmenu

Position the button to the right using the Bootstrap float-right class

Currently, I am utilizing reactstrap within my React component. My primary intention is to position a button to the right side of the container but unfortunately, the following code doesn't achieve the desired result: <td class="col-md-4 clearfix" ...

cssbootstrap-4

Is there a way to make the footer adapt to the varying heights of the grid sections as they grow in size?

Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...

htmlcsstwitter-bootstrap-3

Using CSS to create a hover effect on a button that shows multiple links

I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...

htmlcss

Enhanced Fancybox Version 2 adjusts iframe width to fit content

I have been attempting to adjust the width of the iframe in fancybox v2 to fit my content properly. However, every time I try, the content appears too large within the iframe and requires horizontal scrolling to view it all. My goal is to see the entire wi ...

javascriptjquerycssiframefancybox-2

What is the best way to extract data from a textarea HTML tag and store it in an array before iterating through it?

I have a project in progress where I am developing a webpage that will collect links from users and open each link in a new tab. I am using the <textarea> tag in HTML along with a submit button for link collection. Users are instructed to input only ...

javascripthtml

Can JQuery's 'unslider' be customized to only change the backgrounds?

Check out my source at this link: http://codepen.io/anon/pen/Bvkjx Observe how the content and background images rotate correctly. Now, I'm curious if it's feasible to keep the following content static <p>SOME CONTENT1</p> while ...

javascriptjqueryhtmlcss

Tips for toggling Bootstrap 5 tabs using JavaScript instead of the button version

I am looking to switch tabs programmatically using bootstrap 5. The Bootstrap documentation recommends using buttons for tabs instead of links for a dynamic change. Here is the code I have: $("#mybut").click(function() { var sel = document.querySelector( ...

javascripttwitter-bootstrapbuttontabsbootstrap-5

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap

What is the best way to align the navbar-brand to the right using Bootstrap 4?

I am working with Bootstrap 4 and I have a specific requirement for the navbar-brand item to be positioned on the far right side. By default, the menu appears on the left side. I have attempted to use classes like ml-auto, mx-auto, mr-auto, pull-right, bu ...

csstwitter-bootstrapbootstrap-4

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

Since upgrading from Django 2.1 to 3, the file field in Django admin is now displaying as "loading". https://i.sstatic.net/8JDWu.png An error is appearing in the console. https://i.sstatic.net/RCgwt.png https://i.sstatic.net/78YtG.png Previously, ther ...

javascripthtmlcssdjangoconsole

What is the best way to eliminate all padding from a bootstrap toast notification?

I'm attempting to display a bootstrap alert message as an overlay toast (so it automatically disappears and appears above other elements). Issue: I am encountering a gap at the bottom of the toast and struggling to remove it: https://jsfiddle.net/der ...

javascriptjquerytwitter-bootstrap

FAQs about utilizing percentage width and margins in CSS with Bootstrap

Currently, I am working on a mobile responsive web design using Twitter Bootstrap 3, and I am facing challenges with margins and resizing. I previously asked about creating a mobile-first responsive web design along with responsive images, which you can f ...

htmlcsstwitter-bootstrapresponsive-designmargin

Error Message: The function "menu" is not a valid function

I've encountered an issue with a function not being called properly. The error message states "TypeError: menu is not a function." I attempted to troubleshoot by moving the function before the HTML that calls it, but unfortunately, this did not resolv ...

javascripthtmlcssdropdown

Aligning columns to the right in Bootstrap, featuring an unordered list without any text wrapping

I am trying to prevent the lines from overflowing onto the next line. The details should all be on the same line. I have attempted a solution, but it's not working as expected. https://i.sstatic.net/MYgv5.png <div class="container"> <div cla ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-4

Is it possible to change the background color using jQuery?

Can you assist me with this: I have a website and I am looking to modify the bg-coler when hovering over the menu (similar to how it works on the rhcp-website). I attempted using jquery for this, but unfortunately, it did not yield the desired result.. ( ...

javascriptjqueryhtmlcssjquery-hover