Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with:

 <a data-toggle="modal" href="#work" style="float:right;font-size:60%;">
        <small> Edit 
        </small>
          </a>
          <div class="modal fade " id="work">
        <div class="modal-dialog ">
          <div class="modal-content light">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
              </button>
              <h4 class="modal-title">work
              </h4>
            </div>
          <div class="modal-body">
            <form>
              <fieldset>
                    <label  for="Company">Company Name:
            </label>
                <input type="text" name="Company" id="inputbox" 
                   class="form-control" />
<br>
            <label  for="Job">Job Title:
            </label>
                <input type="text" name="Job" id="inputbox" 
               class="form-control" />
<br>
        </fieldset>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close
          </button>
          <button type="button" class="btn btn-primary">Save changes
          </button>
        </div>
      </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->  

This is my current modal setup where the labels "Company Name" and "Job Title" are displayed alongside their respective input boxes in a single line format.

Answer №1

To effectively layout a form using bootstrap, follow the structure below:

EXAMPLE :

  <form class="form-horizontal" role="form">
  <div class="form-group">
    <table>
      <tr>
        <td>
    <label for="inputEmail1" class="col-lg-2 control-label">Company Name:</label>
        </td>
        <td>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Company Name">
    </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="form-group">
    <table>
      <tr>
        <td>
    <label for="inputPassword1" class="col-lg-2 control-label">Job Title:</label>
          </td>
        <td>
          <div class="col-lg-10" style='padding-left:62px;'>
      <input type="password" class="form-control" id="inputPassword1" placeholder="Job Title">
    </div>
          </td>
      </tr>
    </table>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

VIEW LIVE DEMO HERE

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

The querySelector function is now encountering errors due to a change in the data

Currently, I am utilizing a query selector to retrieve an input when a user selects different buttons. Initially, the buttons had options such as: 8x10 inch 12x16 inch 20x24 inch However, I made changes to the options format like so: 8" x 10" ...

React Nested Menu Selection

Having trouble displaying TextField values in my React app. Utilizing material UI and material-ui-phone-number packages. Noticed that values appear behind when clicking the flag due to zIndex issue. Looking for modifications only on dialog2.js For code ex ...

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time: During the initial fade in, the opacity value does not seem to be respected, as the text seems to a ...

Display a video-thumbnail in place of a static image when sharing a link

When setting up my website, I made sure to include OpenGraph metadata to customize how it appears when shared on social networks and messaging apps. This includes specifying the thumbnail, title, and description: <meta property="og:title" content="Titl ...

Unsuccessful passing of the popstate event in jQuery bind

Currently, I am working on a small demo using the History API, but I seem to be facing some challenges: $(window).bind('popstate', function(event) { console.log('pop: ' + event.state); }); When I click on the 'P ...

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

I am looking to display items in a list with a specific format: |Name | Some other val1| |Very very long no wrap line that...| Some other val2| The right side needs to have a fixed width. The left side should fill al ...

Utilizing Selenium for automating button clicks

When attempting to click a button represented by the following HTML code: <a href="javascript:submitPage('V','All Notes','');" class="viewFilter">All Notes</a> I have made multiple attempts to ...

Is it possible to use just one <map> tag for multiple images in jQuery or JavaScript?

I have multiple images on my website <img usemap="#slideMap_branches" src="branches.png" width="890" height="270" alt="Slide 4"> <img usemap="#slideMap_order" src="order.png" width="890" height="270" alt="Slide 2"> <img usemap="#slideMap_c ...

Ways to align the content in the middle of a div with CSS

My website is functioning perfectly on large devices, but I am facing an issue when trying to center the icon below the slider on mobile devices. I have used the following code in the icn class: .icn{ margin:0 auto; } However, the icon is not centered as ...

Using a local variable within quotes in Angular 4 (HTML) and utilizing ngFor

In my current project, I am utilizing Angular2-Collapsible. The objective is to display the details upon clicking a table row. Below is the code snippet provided. Specifically, if I add [detail]= "detail1", the collapsible-table-row-detail will appear when ...

Is there a way to enable scrolling on the page upon loading, without moving the embedded PDF object itself?

After embedding a PDF object on my webpage, I noticed that when loading the page and scrolling using the mouse wheel, it actually scrolls up and down inside the PDF instead of moving through the entire page. To fix this issue, I have to first click in a bl ...

Creating an "Enter" Key in ASP.net Using C#

Here is the code snippet I wrote using C#: using (StreamWriter streamWriter = File.CreateText(@"C:\File.Html")) { streamWriter.WriteLine(TextBox2.Text); } The issue I am facing is that when I open File.Html, all characters are displayed on a sin ...

How to effectively use graph paper with both major and minor grids in the background?

Looking to create a 100px by 100px image in Inkscape with major lines every 100px and minor lines every 10px. This will help verify viewport size when used as a repeating background. What's the best approach for this? Thinking of using #888888 for ma ...

Is it possible to modify the colors of a box and text when hovering over it?

I am currently working on a styled subscribe button and have encountered an issue. I want the background color of the entire box to change, along with the text color, when hovering anywhere on the box. However, my current code only changes the text color w ...

Use CSS to insert a solid rectangle into the contents of a table cell

Struggling with the HTML code that defines a table? Here is an example: <table> <th> <td style="width:200px"> col1 </td> </th> <tr> <td id="a1"> text1 </td> </t ...

Bootstrap3 and jQuery are attempting to achieve vertical alignment

I am trying to vertically align Bootstrap col-md* columns. I have two blocks, one with text and one with an image, and I want them to be equal in height with the text block vertically centered. My current solution is not working correctly. Can someone plea ...

Align the user profile picture and username vertically in the header using CSS

I was able to perfectly align the header vertically until I decided to add the user's profile picture, and now I can't seem to get it right. After numerous attempts, this is what I've come up with: HTML/PHP: <ul id="right-side"> & ...

What measures can we take to prevent text from dropping to the next line when neighboring text wraps around to multiple lines?

Make sure to review the problem statement in the plnkr linked below. http://plnkr.co/edit/ojt3l3ljNYOA6HDq .d { width: 200px; background: red; text-align: center; >div { display: inline } } .a { float: left; } .c { float: right; ...