Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class.

Is there a way to make sure that it uses the 50% width defined by .col-md-6 and not the 100% width from the .form-control class?

Modified HTML

<form id="user-edit-account" data-toggle="validator" class="form-horizontal">
    <h4>Account Settings</h4>
    <div class="form-group">
        <label for="user-profile-name" class="control-label col-sm-4">Location*</label>
        <div class="col-sm-8">
            <select id="profile-country" class="form-control col-md-6" name="country">
                <option value="">Please select a destination</option>
                <option value="India">India</option>
                <option value="China">China</option>
                <option value="Asia">Asia</option>
            </select>
            <input type="text" class="form-control col-md-6" id="profile-region" placeholder="City" value="">
        </div>
    </div>
</form
htmlcsstwitter-bootstrap-3

Answer №1

To ensure proper alignment and responsiveness, make sure to nest another .row div within the col-sm-8 column and wrap each form control with a corresponding column div. By enclosing the form controls within columns, they will automatically expand to fit the width of their parent container due to the 100% width specified by .form-control.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form id="user-edit-account" data-toggle="validator" class="form-horizontal">
    <h4>Account Settings</h4>
    <div class="form-group">
      <label for="user-profile-name" class="control-label col-sm-4">Location*</label>
      <div class="col-sm-8">
        <div class="row">
          <div class="col-xs-6">
            <select id="profile-country" class="form-control" name="country">
              <option value="">Please select a destination</option>
              <option value="India">India</option>
              <option value="China">China</option>
              <option value="Asia">Asia</option>
            </select>
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control" id="profile-region" placeholder="City" value="">
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

For more examples and detailed information, refer to the Bootstrap Docs.

Answer №2

It seems like a custom width might be necessary for the forms in this case. Additionally, using .form-inline is recommended.

According to Bootstrap guidelines:

Possibly need personalized widths

By default, inputs and selects have a width of 100% in Bootstrap. However, within inline forms, this is reset to width: auto; allowing multiple controls to be on the same line. Depending on your specific layout, you may require additional custom widths for optimal display.

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

Ways to direct to a specific div upon clicking an anchor tag following a page reload?

<a href="#goto">Link 1</a> <div id="goto">DIV</div> Whenever I click on the anchor tag, my webpage reloads and displays a new div with the ID of goto. This div was previously hidden but is now visible at the bottom of the page. I ...

javascriptjqueryhtmlcss

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Is there a way to make text slide in, pause when centered, and then repeat the process? I'm looking for some help with this animation. Here is the code snippet: <marquee direction="left" id="artistslide"> <span id="currentartist">< ...

javascriptjqueryhtmlmarquee

Is there a way to programmatically trigger a submit button using jQuery?

In my ScanField, I am scanning a barcode. After scanning, I trim the last four characters of the barcode string and assign it to a hidden field. When I click on the search button, this value is passed to a PHP site via AJAX. For example: if I scan a barco ...

phpjqueryhtmlajax

Filtering data in a table using Jquery based on specific columns and headers

To retrieve a price value from an HTML table based on a specific column and header, follow these steps: Here is how the table is structured: The HTML code appears as follows: <input id="search_height" placeholder="height..."> <input id= ...

jqueryhtml

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

javascripthtmlcsscheckboxonchange

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = &qu ...

javascripthtmlcss

What is the best way to access the methods in the "parent" class?

I am facing a situation where I have an object with fieldsCreators that hold creator methods for each field. The dilemma is how to call the creator method inside fieldsCreators as shown below: var obj={ creator:function(ch) { .... .. ...

javascriptjqueryhtml

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

javascriptjqueryhtmlcsswordpress

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

javascriptjqueryjsonhtmlcss

There appears to be some lingering content in the JQuery Mobile slide-out dialog box

My jQuery mobile slide out dialog box is experiencing an issue. The first time the slide out occurs, a comment box appears where users can enter comments and then submit them, followed by a "THANK YOU" message. However, when the user closes the dialog box ...

javascriptjqueryhtmlcssjquery-mobile

Exploring how to replicate background-size: cover with a center position using HTML5's <video> tag

Looking to replicate the effect of background-size: cover on a <video> element. I was able to achieve this with the code below: <video id="videobackground" autoplay="true" loop="true"> <source src="BackgroundFinal2.mp4" type="video/mp4" ...

csshtml

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

This is my current code snippet: async function main(){ for(int=0;int<50;int++){ const allLinks = await getLinks(); //console.log(allLinks); const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPa ...

javascripthtmlnode.jsasync-awaitpuppeteer

Assign the two values to variables in the CSS script

My challenge lies in passing two values to the CSS within the <style> tags. The values are: (background-color: --placeholder; color: --placeholdtext;). I am able to pass either one of the values successfully, but not both at the same time. When I cop ...

javascriptjquerycss

Interactive front end design for decision trees

On the front end, I aim to enable users to influence the outcome of a Decision Tree based on their selections. For my Django-React App, I have adopted the style and tree example from the codeplayer. You can find it here: I am tasked with creating an unor ...

javascripthtmlcssreactjs

Ensure that the <td> element remains within the confines of the window

When creating a table with some content, I encountered an issue where long strings would extend beyond the window. I attempted to set max-width: 80%; to limit the length, and also tried setting td, th = width: 240px;, but the problem persisted. Next, I ex ...

htmlcsstwitter-bootstraphtml-table

Achieving 100% height with Flexbox in CSS

In my layout, I have a column on the right with <IndustryList />, and I want everything in the other <div> that contains <ParameterAndPostSearch /> and <SocialPostList /> to extend to the bottom. However, no matter what I try, setti ...

cssreactjsflexbox

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am currently working with the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans ...

javascripthtmljquerycssreactjs

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

javascripthtmlreactjs

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...

javascriptphpjqueryhtml

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2