creating sleek inline forms with Bootstrap 4

What is the best way to create this form using standard Bootstrap 4.3 tools?
https://i.sstatic.net/P05TB.png

Here's what I attempted, but unfortunately it didn't work as expected.

                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Starting Price</label>
                        <input type="text" class="form-control" placeholder="From">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="To">
                    </div>
                </div>
                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Current Price</label>
                        <input type="text" class="form-control" placeholder="From">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="To">
                    </div>
                </div>

Unfortunately, instead of the desired outcome, I encountered the following issue:

https://i.sstatic.net/nGwKP.png

htmlcssbootstrap-4

Answer №1

It is important to note that the solution presented in the previous post may only work accurately for specific label sizes. If the size of the labels changes, it could result in misalignment. Therefore, it is recommended to utilize row and col classes to prevent unexpected outcomes when arranging elements. The form-inline class will stack items in a single line, disregarding length and alignment considerations for items on the next line. This approach is suitable for inline forms. For more flexibility and responsiveness based on device size, consider implementing a grid layout utilizing the row and col classes. Below is a code snippet illustrating this concept:

View Example on CodePen

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row m-3">
  <div class="col-12 m-3">
    <div class="row">
      <div class="col-3"><label for="trade_number" class="float-left">Initial Price</label></div>
      <div class="col-4"><input type="text" class="form-control" placeholder="From"></div>
      <div class="col-1">
        <div class="align-middle">-</div>
      </div>
      <div class="col-4"><input type="text" class="form-control" placeholder="To"></div>
    </div>
  </div>
  <div class="col-12 m-3">
    <div class="row">
      <div class="col-3"><label for="trade_number" class="float-left">Current Price</label></div>
      <div class="col-4"><input type="text" class="form-control" placeholder="From"></div>
      <div class="col-1">
        <div class="text align-middle">-</div>
      </div>
      <div class="col-4"><input type="text" class="form-control" placeholder="To"></div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer №2

Give this a shot.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-12 mb-3 form-inline">
                    <div class="form-group row">
                        <label for="trade_number" class="mr-2 col-mb-4">Starting Price</label>
                        <input type="text" class="form-control " placeholder="From">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="To">
                    </div>
                </div>
                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Current Price</label>
                        <input type="text" class="form-control" placeholder="From">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="To">
                    </div>
                </div>

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

Update the code-behind for the Joomla "submit article" page

After incorporating a new template on my Joomla website, I encountered an issue with the "submit an article" page. The fields in the publishing tab were altered to width: 0px;. Here is how the HTML for the category dropdown appears: <div id="jform_cati ...

htmlcssjoomla

Is it possible to serialize the entirety of a website's Javascript state, including Closure/Hidden scopes?

My goal is to capture a "snapshot" of a webpage while maintaining its interactive functionality, allowing all Javascript states to be saved and restored. An example scenario where this would be beneficial is when a webpage contains script that utilizes glo ...

javascripthtmlgoogle-chrome-extensionfirefox-addon

What could be causing the CSS styling for a Bootstrap 4 button to fail when it's applied?

Starting my first Bootstrap project and running into issues with CSS for my button. Trying to change it to green but it's not working, even though it worked in the past. This is the button I'm trying to style (the blue one): https://i.sstatic.n ...

htmlcssbootstrap-4

Is there a way to limit the width of the input box once it reaches a specific pixel measurement?

One issue I'm facing involves the following code snippet: <html> <head> <script type="text/javascript"> function Expand(obj){ if (!obj.savesize) obj.savesize=obj.size; obj.size=Math.max(obj.savesize,obj.v ...

javascripthtml

Is there a way to utilize JavaScript or jQuery to set the "focus" on a specific div element?

When I mention focus, I'm not just talking about scrolling to a particular section of the page. Is there a method to make the browser act as if the user had actually clicked on that specific div? The scenario in question involves wanting a user to be ...

javascriptjqueryhtml

Conceal query parameters within the URL through the method of URL rewriting

On my PHP website, I am looking to customize the way my URL is displayed. I want to remove the query string parameters and only show the value in the URL like this: mydomain.com/city.php?place='usa'&id=2 Instead, I would like it to display ...

phphtmlurl-rewriting

Submit information to the table: each entry in the table displays as a value of 1

I've encountered an issue with the script on my server. When the postdata is passed, all fields in the database are populated with the number 1 instead of the actual data. <?php $servername = "localhost"; $username = "tadmin_admin"; $password = "R ...

phphtmlmysqlpostpdo

horizontal Bootstrap Image Gallery

I'm having an issue with Bootstrap Thumbnails. Currently, my thumbnails are stacked vertically like this: img01. However, I want them to be in a horizontal layout. What should I do? This is my code: HTML: <div class="hrs" align="center"> ...

htmlcsstwitter-bootstrap

implement a new directive in AngularJS that references another directive in HTML

Check out the Fiddle here Upon button click, a modal window appears. Inside this modal, there is a <template-placeholder></template-placeholder>. When the button is clicked, an if-check is performed to ensure it's the correct button. If ...

javascripthtmlangularjsangularjs-directive

Combining two different elements using CSS styling

In the process of designing, I am faced with the challenge of overlaying one section on top of another while maintaining a curved shape like shown in this design. I have divided the sections into first (blue) and second (gray), and the current layout look ...

cssbootstrap-4flexboxcss-selectorsmargin

The reverse is concealed following a CSS flip transition

After applying a CSS flip animation to a card, the backside isn't visible once flipped. Here is the HTML code for the card component named "ptree-card": <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Rest of th ...

htmlcss

Fluid Bootstrap Container for x-small and small screens

Is it possible to have the outer-most div container named "container" for md and lg, while using container-fluid for xs and sm without any additional CSS? Any suggestions on achieving this natively? Appreciate your help. ...

twitter-bootstrapbootstrap-4

Incorporate Bootstrap 4 into your Laravel 6 project

As a Laravel beginner, I attempted to automatically import Bootstrap 4 using npm install and npm run dev after adding the proper version of Bootstrap to my package.json file. I saw this process in some Laravel tutorials I've been following. The issue ...

laravelnpmbootstrap-4laravel-6

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

javascripthtml

Choosing a group of kids who all share the same element tag

I currently have a situation where I need to display only the first two paragraphs in a div when the page loads, with the remaining paragraphs hidden. I am struggling to achieve this and am seeking guidance on how to do so. In the jsfiddle example provided ...

javascriptjqueryhtmlcss

What is the best way to trigger a function once another one has finished executing?

After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page s ...

javascripthtmljqueryajaxbootstrap-5

Guide to centering Embed horizontally with Bootstrap 5

My goal is to create a centralized input with an image positioned above it. I have been following the guidelines provided in the position documentation, but the image still does not align horizontally: https://i.sstatic.net/awWxL.png Here's the code ...

htmlcssbootstrap-5

PHP throws an error of "Undefined property: stdClass" when attempting to upload an image's path

I am currently uploading the description, number, and the image path using PHP database. However, I am encountering an error when attempting to retrieve the image from the controller. The error message reads: "Undefined property: stdClass::$imgPath .... o ...

phphtmlangularjs

Achieving alignment of header text and body text on the same line

I am dealing with a formatting issue where the first item in my paragraphs is not lining up properly. Here is an example of the problem: Header waspeen: 3304.07 ananas: 24 appel: 3962.0 Header waspeen: 3304.07 ananas: 30 appel: 3962.0 Does anyone k ...

htmlcss

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax