Displaying a Bootstrap button and an input box next to each other

Looking for advice on aligning or arranging a button and input box side by side in Bootstrap without grouping.

I've searched online for examples, but they all involve grouping of elements.

jsfiddle: https://jsfiddle.net/erama035/p9dagmL3/3/

<div class="container">
    <div class="row">

       <div class="col-xs-5 col-sm-5 col-md-5">
            <button class="btn btn-default col-sm-2 col-md-2">add</button>
            <input  class="form-control col-md-3 col-sm-2"/>
       </div>

       <div class="col-xs-7 col-sm-7 col-md-7">
            <button class="btn btn-default col-md-2">remove</button>
            <input  class="form-control col-md-5"/>
       </div>

   </div>  
 </div>
htmltwitter-bootstrapcss

Answer №1

If you're looking to quickly achieve a side-by-side layout for child elements within a parent <div>, consider using Flexbox. By applying the following CSS, the child elements will be converted to flex items and arranged next to each other by default:

.container > .row > div {
  display: flex;
}

For a more structured approach, you can utilize Bootstrap's predefined classes for grouping. Check out the example below:

.container>.row>div {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-5 col-sm-5 col-md-5">
      <button class="btn btn-default">add</button>
      <input class="form-control" />
    </div>
    <div class="col-xs-7 col-sm-7 col-md-7">
      <button class="btn btn-default">remove</button>
      <input class="form-control" />
    </div>
  </div>
</div>

Answer №2

To achieve cross-browser compatibility, you can easily utilize the inline-block property.

.btn,.form-control{display: inline-block; width: auto;}

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

Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...

javascripthtmlcsscss-position

A rightward sliding submenu that appears upon clicking a button

I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...

htmlcssweb

What is the easiest way to update the border color of a radio button in Material-UI?

I am looking to customize the appearance of the outer ring on Material UI radio buttons. https://material-ui.com/components/radio-buttons/ Currently, my radio button looks like this: https://i.stack.imgur.com/o67mN.jpg However, I would like it to look ...

cssreactjsmaterial-ui

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

htmlcssruby-on-railswicked-pdf

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

htmlcssflexbox

Can one manipulate SVG programmatically?

Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered ...

javascriptjqueryhtmlsvg

View the Outcome of the Latest Form Submission on a Fresh Page

I have created a form that stores input values in a database table. Now, I want to display these results on another page once the form is submitted. However, I am struggling with how to retrieve and display all the values from the database record on the ne ...

phphtmlmysqlforms

Using Angular's ng-repeat alongside a bootstrap input checkbox, make sure to incorporate a dynamic ng-model and utilize ng-

This particular issue is proving to be a bit challenging for me to articulate, but I'll give it my best shot. I'm currently working on implementing Angular checkboxes with their ng-true-value attribute in conjunction with a dynamic ng-model. < ...

javascriptangularjstwitter-bootstrapcheckbox

Displaying an email exist error message is important when updating an email address, and it is necessary to validate both the

      My code is triggering an email exists error when I remove NOT EXISTS from the SELECT query. However, it also incorrectly claims that my current email already exists when I try to update it. How can I modify the select query to handle the email e ...

phpjqueryhtmlajax

Manipulating jQuery Element Values

I have a set of checkboxes that I need to bind to my MVC model. To achieve this, I am trying to capture the checkbox values and store them in a hidden input field with the appropriate Id for binding to my model. @foreach (var answer in question.Answers) { ...

jqueryasp.net-mvc-3html

Centered Alignment for Bootstrap Carousel Captions

I'm attempting to make a simple change here. Rather than having the Bootstrap Carousel Captions automatically align at the bottom of the Carousel, I would like them to align at the top by default. Any suggestions on how I can achieve this? ...

cssbootstrap-4

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures

My current code successfully updates part of an src URL for regular images. let svgz = document.querySelectorAll(".svg"); for (let i = 0; i < svgz.length; i++) { svgz[i].src = svgz[i].src.replace("light", "dark"); } Now, ...

javascriptcss

Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names. Currently, this is how it appears: https://i.stack.imgur. ...

htmlcsstemplatessmartyprestashop

The content is overflowing due to the height being set to 100%

I am facing a challenge with designing a webpage that has a header with dynamic height and a content area. The goal is for the content to fill up the remaining space on the page, even if there isn't enough text. This is a common issue that many peopl ...

htmlcss

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

htmlcsswordpress

Background image fixed with scrolling effect

I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...

javascriptjqueryhtmlcssparallax

Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/ The jQuery section below is causing some trouble: $(document).ready(function(e) { $(".sub-handle").click(function() { if(!$(this).hasClass('showing-sub&ap ...

jqueryhtmlcssweb

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

How can I combine HTML and CSS in a single request using the sendFile method in Express?

const app = require('express')(); app.get('/', function(req, res) { res.sendFile(__dirname + "/" + "index.html"); }); <link rel="stylesheet" href="style.css"> I utilized the Node.js code above to send an HTML file. In order to ...

htmlcssnode.jsexpresssendfile

How to pass multiple variables, such as "Value" and "Selected", to the next HTML page in Flask without only passing "Selected"

I am currently utilizing Flask to generate an HTML form (specifically a dropdown menu) with values retrieved from a list output by a Python function. The variable in the Python app.py code is called "two_dimensional_list". Here are some sample values: [[&a ...

pythonhtmlflask