Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not being displayed on the same row. Any suggestions on how to achieve this?

Current code implementation:

  <div class="container-fluid">
      <div class="row">
          <div class="col-lg-2">
            <div class="form-group">
              <input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
            </div>
          </div>
          <div class="col-lg-2">
            <div class="form-group">
              <select class="search-form-currency form-control"> 
                <option value="AED">AED</option>
                <option value="AFN">AFN</option>
                ...
              </select>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <select class="search-form-currency form-control"> 
                <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                <option value="AL">Albania</option>
                ...
              </select>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <select class="search-form-currency form-control"> 
                <optgroup label="All payment methods">
                  <option value="ALL_ONLINE">All online offers</option>
                  <option value="NATIONAL_BANK">National bank transfer</option>
                  ...
                </optgroup>  
              </select>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="form-group">
              <input type="submit" name="find-offers" value="Search" class="btn btn-primary">
            </div>
          </div>                                                            
      </div>
  </div>

The Current Appearance:

https://i.stack.imgur.com/PADNj.png

Desired Result:

https://i.stack.imgur.com/9JWKY.png

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

I have a few suggestions to enhance the spacing and sizing...

  1. To eliminate extra space, remove the gutter from the row using no-gutters
  2. Prevent wrapping on larger screens by adding flex-lg-nowrap to the row for lg and wider viewports
  3. Opt for auto-layout grid sizing for the last 2 columns on the right

Check out the Codeply demo

<div class="container-fluid">
    <div class="row no-gutters flex-lg-nowrap">
        <div class="col-lg-2">
            <div class="form-group">
                <input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
            </div>
        </div>
        <div class="col-lg-2 pl-lg-1">
            <div class="form-group">
                <select class="search-form-currency form-control">
                    ...
                </select>
            </div>
        </div>
        <div class="col-lg-4 pl-lg-1">
            <div class="form-group">
                <select class="search-form-currency form-control">
                    ...
                </select>
            </div>
        </div>
        <div class="col-lg pl-lg-1">
            <div class="form-group">
                <select class="search-form-currency form-control">
                    ..
                </select>
            </div>
        </div>
        <div class="col-lg-auto pl-lg-1">
            <div class="form-group">
                <input type="submit" name="find-offers" value="Search" class="btn btn-primary">
            </div>
        </div>
    </div>
</div>

Answer №2

When working with Bootstrap, keep in mind that there are 12 columns in a row. Your current setup of col-lg-2 2 4 4 2 totals to 14 columns, which won't fit on one row. To fix this, adjust the total column size to be below 12.

For responsive design purposes, consider using col-, as well as col-sm, and col-md classes to ensure your layout looks good on smaller screens as well.

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

"PHP MySQL news error" - An unexpected error occurred

Just incorporated a news system using MySQL/PHP, it functions flawlessly; however, encounters errors when inserting HTML. For instance, inserting a YouTube video results in the addition of / or \ Can someone advise on what changes need to be made in ...

phpmysqlhtml

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

How can I customize the color of a date range in the jQuery date picker?

Currently, I am using the following method to set a different color for a specific date range - April 5th to April 7th. You can view it here: http://jsfiddle.net/sickworm/dpvz52tf/ var SelectedDates = {}; SelectedDates[new Date('04/05/2015') ...

jquerycsscalendarbackground-colordatapicker

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

JQuery Mobile fails to apply consistent styling to user input check items within a list

I have successfully implemented the functionality to add user input items to a checklist. However, I am facing an issue where the newly added items are not adhering to Jquery Mobile's styling. Here is a screenshot showcasing the problem: Below is th ...

javascriptjqueryhtmlformsjquery-mobile

Once the page is refreshed, the checkbox should remain in its current state and

I have a challenge with disabling all checkboxes on my page using Angular-Js and JQuery. After clicking on a checkbox, I want to disable all checkboxes but preserve their state after reloading the page. Here is an example of the code snippet: $('# ...

javascriptjqueryhtmlangularjscheckbox

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

htmlcss

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

javacssselenium-webdriver

Transform the numerical character into a checkbox within a table using AngularJS

In my HTML code, I am utilizing AngularJS to present data in a table. <div ng-controller="CheckCtrl"> <table class="table table-hover data-table sort display"> <thead> <tr> <th class="Serial_"> ...

htmlangularjscheckbox

Utilize MaterialUI's stepper component to jazz up your design with

Is there a way to customize the color of a material ui Stepper? By default, the material UI stepper's icons use the primary color for both "active" and "completed" steps. class HorizontalLinearStepper extends React.Component { state = { activeS ...

javascriptcssreactjsmaterial-ui

What could be preventing my state from changing to false when I click the close button on the menu?

Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...

csstypescriptnext.jstailwind-csscss-animations

Is it possible for HTML/CSS to automatically adjust content size to fit or fill a container?

I'm interested in finding a CSS-only technique that can ensure content within a container scales to fit, regardless of whether it's text or images. Take a look at the example below: .container { display: inline-block; width: 2in; hei ...

htmlcss

Transforming the DOM using jQuery

I am looking to manipulate the DOM using jQuery. This is the initial source code: <td class="name"><a href="position_details.php?x=-109&amp;y=95">21</a> </td> <td class="name"><a href="position_details.php?x=-109& ...

javascriptjqueryhtml

Learning to extract information from a JSON file with various key and value combinations

I am facing a challenge with my JSON data file, which contains UserIDs as keys and Passwords as values. My goal is to use JavaScript for validation by reading this JSON file. The structure of my JSON is as follows: IDsNPass = '[{"A":"A15"},{"B":"B15" ...

javascripthtmljson

Challenges arise when creating responsive map regions in Vue 3

I am currently working on a project in Vue 3 that involves an image map with click events on certain areas. The challenge I'm facing is that the images scale according to the browser size, but the coordinates of the image map are fixed pixel sizes. I& ...

htmlimagevue.jsdictionaryvuejs3

How to convey emotions through Material UI MenuProps to customize paper root classes

Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...

cssreactjsmaterial-uiemotion

Changing an HTML container using jQuery and Ajax to facilitate a login process

Currently, I am on the lookout for a unique jQuery plugin that can replace a div when a successful login occurs. Despite searching multiple times on Google, I have been unable to find an ideal plugin that meets my specific needs. Do any of you happen to kn ...

jqueryajaxhtmlloading

Is there a way to incorporate additional text into option text without compromising the existing values?

One challenge I'm facing is adding additional text to the options without changing their values upon selection. Would you be able to assist me with resolving this issue? I have come across the following HTML code: <select id="q_c_0_a_0_name"> ...

javascripthtmljqueryhtml-select

Tips for setting the correct width for a DIV in Internet Explorer 8

I'm facing a little problem here. I'm trying to make a DIV 434 pixels wide in IE8, but for some reason it keeps getting rendered as 414 pixels. Can anyone tell me why it's cutting off 20 pixels? <html> <head> <style type= ...

cssinternet-explorer-8width

Sending data from a JSP page to a JavaScript function

I am working on a script that dynamically adds text boxes based on a specific time interval. <script type="text/javascript> $(document).ready(function() { var data = $('#data').val(); var counter = 1; var d = new Date(); va ...

javascriptjqueryhtmlmysqljsp