Steps for aligning two input elements side by side in Bootstrap 4

I need help positioning the text input and button side by side, with a margin of about 10px between them.

The code I have right now is producing the result shown in the attached photo.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="float-left">
    <input type="number" class="form-control item_page_item_db w-50" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
  </div>
  <div class="float-left">
    <button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Add to Cart
    </button>
  </div>
  <div class="clearfix"></div>
</div>

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

I am looking to adjust the positioning of the input and button elements to be closer together and vertically centered properly. Currently, they lack CSS styling for size and only have colors and font size applied.

htmlcssbootstrap-4

Answer №1

To apply the bootstrap method, utilize col classes for setting width as demonstrated below:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
  <div class="col-sm-2">
    <input type="number" class="form-control" value="1">
    </div>
    <div class="col-sm-10">
    <button class="btn btn-outline-secondary" type="button">
      <i class="fa fa-shopping-basket"></i>
      Add to Cart
    </button>
    </div>
  </div>
</div>

For a more straightforward CSS approach, consider the following:

.cont {
  display: flex;
}

input {
  width: 100px !important; /**Specify width**/
  margin-right: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="cont">
  <input type="number" class="form-control" value="1">
  <button class="btn btn-outline-secondary" type="button">
    <i class="fa fa-shopping-basket"></i>
    Add to Cart
  </button>
</div>

Answer №2

Take a look at the structure and CSS provided below for assistance.

.col-sm-6 input[type="number"]{width:100%}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-6">
    <input type="number" class="form-control item_page_item_db" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
  </div>
  <div class="col-sm-6">
    <button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Add to Cart
    </button>
  </div>
  <div class="clearfix"></div>
</div>
</div>

Answer №3

Consider utilizing the col-md-6 class in place of using float-left or float-right.

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

Eliminate the div element using jQuery if it contains a line break tag but no text

I am faced with a situation on a page where some div elements contain content while others only have a BR tag. I am attempting to remove the div elements that contain only the BR tag. Below is the HTML format in question: Here is an example of one type: ...

javascriptjqueryhtml

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

javascripthtmlcssvue.js

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...

javascriptjqueryhtmlcssjquery-plugins

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

javascripthtmlcss

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

javascriptcss

How to reset an HTML5 form using the submit button

Can you prevent a form from resetting when you click the submit button? As it stands, clicking the submit button in HTML5 clears all the form fields. Is there any way to retain the previous values instead of resetting them? ...

htmlforms

What could be the reason for the top alignment of only a portion of the cell

Here is the code snippet I am working with: <html> <head> <style> table.t_group { border: 2px solid black; margin: 0 auto 0 auto; } table.t_group > tbo ...

htmlcss

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

htmlcss

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

htmlcsshover

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

javascripthtmlfetch-api

Arrange the <form:radiobuttons> in a vertical position

I'm currently utilizing Spring MVC's <form:radiobuttons> to showcase radio buttons: <form:radiobuttons path="selection" items="${arraySelection}" /> The issue I am facing is that it is displaying the radio buttons in a horizontal la ...

htmlcssjspspring-mvc

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

javascriptjqueryhtml

Utilizing the Power of ChartJs

I am currently in the process of developing a web application that will provide users with the ability to compare the number of calories they burn during exercise with the amount they consume in a meal. To achieve this goal, I have chosen to utilize ChartJ ...

pythonhtmldjangochart.js

Customize default zoom settings with Cascading Style Sheets (CSS)

body{ margin-bottom: 10%; margin-left: 10%; width:80%; color: #264653; position: relative; } #photo{ border-radius: 70%; position: absolute; left: 25%; top: 50px; } .left1{ margin-top: 10%; background-color: #264653; width : 30%; ...

htmlcsszooming

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

javascripthtmlnode.js

What could be causing the 404 Ajax not found error in my script?

I'm facing an issue with my code. When I try to run it, I encounter the following error: 404 (Not Found) while using the get method. Here is my html code snippet. <html> <head> <title>Issue</title> <meta charset= ...

javascriptphphtmlajax

What is the significance of z-index in relation to relative and absolute positioning?

Is there an issue with z-index when working with a div that has absolute position relative to another div? I am trying to place the absolute div below the other one, but it always appears on top. How can I resolve this problem? ...

css

disabling responsiveness in Bootstrap 2

I am facing an issue with Bootstrap version 2 where I am unable to fix the grid layout. Even after wrapping all my HTML elements in a container, the layout still behaves unpredictably on different screen sizes. Here is a snippet of my code: <header> ...

htmlcsstwitter-bootstrap

Guide on Updating the ColModel Dynamically in JAVASCRIPT/HTML using clearGridData, setGridParam, and reloadGrid Functions

I am trying to figure out how to dynamically change the colmodel of my grid using a function that is called by a SELECT. The reason for this is because my grid has different periods and needs to display either cost or tons based on user selection. Below i ...

javascripthtmljsonjqgridreload

How can I troubleshoot the unresponsive remove div function on my website?

My code is running fine on CodePen (link provided below), but for some reason, it's not working properly in the web browser. I am executing the code from localhost and the button isn't responding as expected. CODE Here is my Visual Studio code ...

javascriptjqueryhtmlbootstrap-4