Creating a combined Email and Password form field in a single row using Bootstrap

Recently, I decided to explore bootstrap. I am looking to implement email/password validation in one row on my rails app:

email? | password? | OK

Currently, I have a functioning code for displaying only an email field and an OK button in one row:

email? | OK

<div class="col-lg-12 text-center v-center">
...
  <form class="col-lg-12">
    <div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
      <input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email?">
      <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
    </div>
  </form>
</div>

and

.v-center {
  margin-top:7%;
}

I attempted to add a password field to the existing code:

...
    <div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
      <input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email">
      <input type="text" class="center-block form-control input-lg" title="Enter your password." placeholder="password">
      <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
...

However, the result was not as expected:

email?
          | OK
password?

What could be missing in the implementation?

Answer №1

Upon investigation, it seems that bootstrap's .center-block includes a declaration of display: block;. To achieve a side-by-side appearance for elements, they typically require a css property of either inline or inline-block (although there are alternative methods, these two are widely considered the most common and straightforward).

Answer №2

Check out the code snippet below to see how it's done. The key is to utilize the "form-inline" class within the form tag.

   <form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b616a656e256f646e4b6e73cfeaeba7aaaebecfaca49cbdbaba87d7969b393735">[email protected]</a>">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

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

Responsive Input Navigation Bar CSS

How can I create a top bar that resembles the design of Google Play? https://i.sstatic.net/tdLVz.png I am struggling to make the input box flexible and fit the window size... The minimum width of Div.search is set to 250px but it's not working ...

Issues with Bootstrap indicators and slide controls functionality are being experienced

I am currently exploring a method to create a carousel with thumbnails by referring to this example. I have followed their instructions closely, but unfortunately, clicking on the thumbnails and indicators does not seem to be working as expected. The onl ...

Find and conceal the object within the list that includes the term "Ice"

The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...

PHP consistently selects the final radio button element

Having an issue with submitting data from radio buttons to an ajax request for database transfer. -html <form class="siteInfo" action="ajax/site.php?nr=<?php echo $_GET['nr']; ?>" method="POST"> <input type="radio" name="transpor ...

The navigation bar is failing to redirect to another page upon clicking in Bootstrap 5

The problem arises when attempting to navigate with the navbar item, as it fails to redirect to the intended page and provides no feedback. However, upon removing the bootstrap.bundle.min.js, the redirect feature operates as expected. Nonetheless, the coll ...

What is the best way to customize the appearance of the elements in the hamburger menu within a Bootstrap navigation bar?

I have successfully implemented a responsive navbar using Bootstrap 4. When the screen size is large, there are 2 buttons displayed, and when it's small, a hamburger menu appears. [insert image description here][1][insert image description here][2] ...

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

Tips for preventing the colors of all buttons from changing when only one is clicked in JavaScript

const tasks = `[{ "taskName": "Task 1", "image": "./images/task1.jpg", "description": "Task 1 description", "importance": 0 }, { "taskName": "Task 2", "image": "./images/task2.jpg", "description": "Task 2 description", ...

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

Utilize Flexbox to arrange elements in a grid layout based on specified number of columns and rows

My div is currently empty. <div id="container"></div> I have applied the following styling with CSS: #container{ display: flex; position: relative; flex-flow: row wrap; width: 100%; } The goal is to add more divs to the cont ...

Tips for ensuring uniform button height across all cards

I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code: * { margin: 0px; pad ...

How to use image source and mouse hover effects in CSS3

Can we create a CSS3 class for the src, onmouseout, and onmousehover properties? <img src="http://www.example.com//images/pic.png" onmouseout="this.src = 'http://www.example.com/images/pic.png'" onmouseover="this.src = 'http://www.examp ...

Why does my CSS attribute selector fail to update when the property's value changes?

Context: I'm working on a React-based web app that utilizes traditional CSS loaded through an import statement. In order to create a slider functionality, I have applied a CSS selector on the tab index attribute. Challenge: The issue I am facing is t ...

Align Horizontal Fixed Element

<html> <head> <style> #rectangle { position: absolute; right: 0; bottom: 0; width: 150px; height: 200px; } </st ...

Angular service provided by MetronicApp

I've been working on integrating Angular services with the Metronic App. This is how I defined my service: angular.module('MetronicApp').service('shaperService', ['$http', function ($http) { this.shapers = function(param ...

html text alignment in the center

Is there a way to align text in the center without shifting the starting position of the first letter? before text 1 text text text 2 text text after ...

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

What are the most efficient methods for extracting information from tables on Wikipedia and converting the data and links into JSON format?

I am relatively new to web development and have a question regarding extracting data from Wikipedia. I am working on a personal web application that will catalogue past UFC events. Unfortunately, I have not been able to find an open-source API with detai ...

providing the context for the hover title description

I seem to be struggling with a seemingly simple issue and can't find a solution. Below is the code I have written: <html> <head> <style> span.dropt { border-bottom: thin dotted; background:white; } </style> </head> ...

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...