---
title: "Display two fields side by side in a Bootstrap Form"  
description: "Display two fields side by side in a Bootstrap Form"  
author: "Anonymous User"  
published: 2014-12-26  
updated: 2023-04-27  
canonical: https://www.mindstick.com/forum/12815/display-two-fields-side-by-side-in-a-bootstrap-form  
category: "html"  
tags: ["html", "bootstrap"]  
reading_time: 2 minutes  

---

# Display two fields side by side in a Bootstrap Form

I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to display a year [range](https://www.mindstick.com/articles/23243/complete-troubleshooting-tips-for-belkin-n300-range-extender-setup) [input](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java) on a [form](https://www.mindstick.com/forum/6/multi-form-mfc-application) that has a 2 textboxes. One for the min and one for the [max](https://www.mindstick.com/articles/1155/count-max-min-function-in-excel) and are separated by a dash.

I want this all on the same line using [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel), but I cannot seem to get it to work correctly.

**Here's my [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii):**

```
<form id="Form1" class="form-horizontal" role="form" runat="server">    <div class="row">        <div class="form-group">            <label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>            <div class="col-sm-4">                <asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />            </div>            <label class="col-sm-2 control-label">-</label>            <div class="col-sm-4">                <asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />            </div>        </div>    </div></form>
```

## Replies

### Reply by Aryan Kumar

To display two fields side by side in a Bootstrap form, you can use the grid system by dividing the form into two equal-width columns using the **col-6** class for each column. Here's an example:

```html
<form>
 <div class="form-row">
   <div class="form-group col-6">
     <label for="field1">Field 1</label>
     <input type="text" class="form-control" id="field1">
   </div>
   <div class="form-group col-6">
     <label for="field2">Field 2</label>
     <input type="text" class="form-control" id="field2">
   </div>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>
```

In this example, the **form-row** class is used to group the columns together, and each column has the **form-group** class to style the form fields. The **col-6** class is used for both columns, which makes them each take up half of the available width.

By default, Bootstrap uses a 12-column grid system, so you can adjust the column widths as needed by using other classes like **col-4** (for one-third width) or **col-8** (for two-thirds width), for example.

### Reply by Anonymous User

How about using an input group to style it on the same line?

Here's the final HTML to use:

```
<div class="input-group">    <input type="text" class="form-control"placeholder="Start"/>    <span class="input-group-addon">-</span>    <input type="text" class="form-control" placeholder="End"/></div>
```


---

Original Source: https://www.mindstick.com/forum/12815/display-two-fields-side-by-side-in-a-bootstrap-form

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.