"Revolutionize your layout with Bootstrap 4's cutting-edge inline grid

Can anyone help me figure out how to get these input fields to display in the same line? I'm using Bootstrap 4 but can't seem to make it work.

Here is how I want it to look: enter image description here

Here is my HTML code:

<body>

  <div class="container h-100">
    <div class="row">
      <div class="col-12">
          <div id="content">
            <h1>Contact Page</h1>
            <h3>Contact Us</h3>
            <hr>
          </div>
      </div>
    </div>
  </div> 
      <div class="container">
        <div class="row">
          <div class="col-sm-6 offset-md-3">
            <form class="form-group">
              <div class="form-inline">
                <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
              </div>              
            </form>
          </div>
          <div class="col-md-6 offset-md-3">
            <form class="form-group">
              <div class="form-inline">
                 <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
              </div>              
            </form>
            <button type="submit" class="btn btn-default">Send invitation</button>
          </div>
        </div>
      </div>
csshtmlgridbootstrap-4

Answer №1

Ensure to include either "form-row" or "row" in your code.

<form>
  <div class="container">
    <div class="form-row">
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group mx-sm-3 mb-2">
        <button type="submit" class="btn btn-default">Send invitation</button>
      </div>
    </div>

  </div>
</form>

OR

<form>
  <div class="container">
    <div class="row">
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
      </div>
    </div>
    <div class="row">
      <div class="form-group mx-sm-3 mb-2">
        <button type="submit" class="btn btn-default">Send invitation</button>
      </div>
    </div>
  </div>
</form>

Answer №2

Revamp your form layout. - Consolidate all form fields within one form tag, instead of using a form tag for each input. - Remove the div with class form-inline. - Apply the form-inline class to the div with class="col-md-6 offset-md-3".

Answer №3

  <div class="container">
  <form>
      <div class="form-inline">
          <div class="form-group mx-sm-3 mb-2">
            <input class="form-control transparent-input" type="text" name="name" placeholder="Full Name" required>
         </div>
         <div class="form-group mx-sm-3 mb-2">
             <input class="form-control transparent-input" type="text" name="surname" placeholder="Last Name" required>
         </div>
      </div>
     <div class="form-group mx-sm-3 mb-2">
         <button type="submit" class="btn btn-default">Submit Form</button>
     </div>
 </form>  
 </div>

Choosing between row or form-row is up to personal preference as it changes the spacing. Both options work fine.

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

How do I implement a dynamic input field in Angular 9 to retrieve data from a list or array?

I'm looking to extract all the strings from the Assignes array, which is a property of the Atm object, and populate dynamic input fields with each string. Users should be able to update or delete these strings individually. What approach can I take us ...

htmlangulartypescript

Despite being a valid <link rel="shortcut icon">, a validation error occurs

I'm encountering an error with the w3.org validator related to this line of code: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> The error message provided is as follows: Line 1, Column 727: Invalid value shortcut icon f ...

htmlfaviconw3c-validation

Clicking on a different texture/image allows for the texture to change in Three.js

I am working on creating a 360 image view using Threejs. I have a total of 4 images, with one linked to Threejs and the other 3 displayed as thumbnails at the bottom of the page. When a thumbnail is clicked, the 360 image view should change accordingly. Y ...

javascriptjqueryhtmlcssthree.js

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

htmlangularjs

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

javascripthtmlangular

Using the Twit package on the client side: a step-by-step guide

I have been utilizing the Twit package for searching tweets. After executing the js file in the console, I am able to see the tweets but when trying to use them on my webpage, an error 'Uncaught ReferenceError: require is not defined' pops up. Th ...

javascripthtmlapitwittertwitter-oauth

PHP file secured to only accept variables posted from HTML form

This is a basic HTML/AJAX/PHP script I have implemented. <form id="new_user" action="" method="post"> <div class="col-md-3 form-group"> <label for="username">Username</label> <input type="text" class="form-control" name ...

javascriptphpjqueryhtmlajax

When using v-select to search for items, the selected items mysteriously vanish from

I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...

javascripthtmlvue.jsvuejs2vuetify.js

Develop an ASCX component to handle various tasks

I am currently in the process of developing a unique custom control that will feature two radio buttons. This project is being carried out using MVC4 and ASP.NET technology. At the moment, I have successfully created two sets of two radio buttons on separa ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

Which is better for React: Bootstrap or Material UI?

In my experience working on various projects, I have encountered the situation where I need to incorporate a Material UI component into a bootstrap component. Surprisingly, this integration has worked seamlessly and the user interface appears as expected ...

reactjsbootstrap-4material-ui

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

javascripthtmlioscssmobile

Ways to retrieve parameters using $_GET

I am having trouble retrieving the parameter $_GET with a value that contains the character: '#'. Here is the code I am using: <iframe src="http://localhost/wp352/wp-content/plugins/heloworld/templates/options-rte.php?text_content=<span s ...

phphtmlutf-8

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular

What is the solution for the issue of encountering an undefined key array email while attempting to log in through the form?

I encountered an issue while working on a login form that communicates with the database using PHP at the backend. Even though I have verified the correctness of my login credentials, I am facing an error related to undefined array keys 'email and pas ...

phphtmljquerymysqlforms

Insert a division into the table following every row

I'm working with a table that can be found here: https://codepen.io/anon/pen/bjvwOx Whenever I click on a row (for example, the 1st row 'NODE ID 1'), I want the div with the id #divTemplate to appear below that particular row, just like it d ...

javascriptjqueryhtmlcss

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint

What could be causing my external JavaScript file to not function properly upon loading my HTML file?

I have organized my code by separating the HTML and JavaScript portions. The JavaScript code is now in its own separate file and I use 'script' tags to reference it in the HTML file. Within the JavaScript code, I have two functions - one creates ...

javascripthtmlnode.js

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

javascriptcssreactjsuse-state

Generate a new perspective by incorporating two distinct arrays

I have two arrays containing class information. The first array includes classId and className: classes = [ {classid : 1 , classname:"class1"},{classid : 2 , classname:"class2"},{classid : 3 , classname:"class3"}] The secon ...

javascripthtmlangulartypescriptangular8