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>

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

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

Executing a C# function from an HTML hyperlink

I am in the process of developing a website using ASP.NET C#. The site will feature a GridView with data that can be exported, such as to Excel or other formats. To handle the export functionality, I plan to utilize code from this resource. When a user c ...

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

Extra space within table in Firefox

Experiencing an issue with excess whitespace in a table on Firefox. Visit the live example at The problem can also be seen on this jsFiddle: http://jsfiddle.net/DVbCC/ In Chrome and Safari, rows are neatly arranged with minimal spacing, but Firefox show ...

Tips for properly aligning blockquote opening and closing quotation marks

We are currently implementing custom styles for beginning and end quotes in a string using the <blockquote> tag. However, we are having issues with the alignment, as the opening quote appears before the text and the closing quote is at the end of the ...

Calculate the total of the temporary information entered into the input field

I'm totally new to all of this and definitely not an expert, but there's something that really bothers me. I found a website where you have to complete a captcha to log in. It goes like this: <input type="text" class="form-contr ...

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

Tips for deleting part of the URL at the end of all hyperlinks on a webpage

I have a large number of links on the same page that I would like to clean up by removing everything from specific characters until the end of the URL. Currently, there are too many links like this scattered throughout my page. The string "$amp;rs" or "&a ...

Showing pictures from a database utilizing PHP and HTML

I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...

Use the Segoe UI typeface on Internet Explorer for a sleek

I have implemented a custom Segoe UI font in my CSS file. While it displays correctly in Chrome, I am facing an issue where IE and Firefox are showing the default font in certain areas. Below is the snippet of the CSS code: body { margin:0px auto; ...

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

I am facing an issue with an array that includes displayName with HTML tags: this.topicsList = [ {id: "173", name: "Discussion1", displayName: "Discussion1", status: 1}, {id: "174", name: "discussion123", displayName: "discussion123", status: 1}, {id: "19 ...

Using jQuery and HTML to create numerous links that direct to a solitary iframe

I created a basic overlay setup using css, html, and jQuery. Here's how it looks: <a class="activator" id="activator" style="" href="#">hello</a> <div class="overlay" id="overlay" style="display:none;"></div> <div style="d ...

PHP Form Submission: A Simple Guide

One scenario that I'm facing is using the submit button event to populate a field in my form with a value. However, now I'm having trouble getting the form to submit at the same time. Any suggestions on what I can do? Check out this link for mor ...

Understanding the utilization of Angular's limitTo with bootstrap's responsiveness

Currently, I am in the process of developing an application that utilizes Bootstrap's responsive utilities along with AngularJS. One scenario I am facing involves displaying information in a grid format. The grid dimensions adjust based on screen size ...

Tips for populating a textfield with data from a <select> dropdown using javascript

Is there a way to populate a textfield with data automatically based on information provided in the tab, utilizing JavaScript? Additionally, is it possible to prevent the filled data from being edited? The textfield should be able to dynamically fill data ...

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

Transforming the pen into a creative assortment of animated social media icons for top-notch production

My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify. The issue at hand is that instead of the c ...

The Angular Tooltip feature is unable to interpret the characters "' '" or "' '"

Let me explain the scenario: I am receiving a list of objects from my back-end service, which I then break apart using ngFor and display accordingly. Each item in the list has an associated toolTip that provides additional information. The info for each i ...

Retrieving the value of onCheck from the Checkbox/ListItem

Imagine I have a React.Component that displays components from material-ui: {data.map(value => ( <ListItem key={data.indexOf(value)} primaryText={value} leftCheckbox={ <Checkbox onCheck={this.pr ...

Is there a way to automatically determine the text direction based on the language in the input text?

When posting in Google Plus (and other platforms), I noticed that when I type in Persian, which is a right-to-left language, the text direction changes automatically to rtl and text-alignment:right. However, when I switch to English, the direction switches ...