What's the best way to stack two input fields vertically and combine them into a single unit?

My goal is to have two inputs placed inside a container, one above the other with no space in between and without separate borders for each input. I am using Bootstrap, but so far my attempts with vertical alignment have been unsuccessful. Here is the code I have:

<div class=" col-4 offset-md-4 text-center list-group">
          <li style="list-style: none;">
            <input type="email" name="" class="form-control list-group-item" placeholder="Email address">
          </li>
          <li  style="list-style: none">
          <input type="password" name="" class=" form-control list-group-item" placeholder="Password">
          </li>
</div>

I would like these inputs to mimic the appearance of "list groups" in Bootstrap, but with input elements instead of list items. The following is an example of the bootstrap list code:

 <ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
htmlcssinputbootstrap-4alignment

Answer №1

Typically, the list-group-item class is applied to the <li> element in order to have borders styled as desired using bootstrap.css. In this case, the list-group-item class is being used on the <input> element. To make use of the default styles provided by bootstrap.css, a simple solution can be implemented by converting the parent <div> into a proper unordered list using the <ul> tag and adding the list-unstyled class to it instead of applying inline styles to each individual list item (<li>). Additionally, an ID has been assigned to the list so that styling can be targeted specifically for the first input element.

input.list-group-item {
    border-top-width: 0;
}
#formlist>li:first-child>input {
    border-top-width: 1px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="formlist" class="list-unstyled col-4 offset-md-4 text-center list-group">
  <li>
    <input type="email" name="" class="form-control list-group-item" placeholder="Email address">
  </li>
  <li>
    <input type="password" name="" class=" form-control list-group-item" placeholder="Password">
  </li>
</ul>

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 achieve 8 columns in a single row using Javascript and Bootstrap

Recently, I created a simple function for searching movies and manipulating them in the DOM. The issue arises when a movie name is entered and the API response returns around 20-30 recommendations. I wanted to display this fetched data in 8 columns per row ...

javascripthtmltwitter-bootstrapdombootstrap-4

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

The sticky header is malfunctioning due to a null offsetTop value

import React , {useRef, useEffect} from 'react' import './header.css' const nav_links =[ { path:'#home', display:'Home' }, { path:'#about', display:'About& ...

javascripthtmlreactjsnavbar

Align the label vertically with the corresponding input field

I am currently in the process of revamping an old HTML form to eliminate the use of tables. I found a solution on this site to give the label a fixed width, and here is how it looks in the current code: HTML <div id="form"> <label for="field ...

htmlcssvertical-alignment

How can I address the problem of adjusting the title to match the size of the image in question?

I need help creating a design where an image and h2 title appear on top of the image... Below is a reference screenshot: I am looking to achieve something similar. CSS: h2 { position: relative; letter-spacing: 1px; display: inline-block; positi ...

jqueryhtmlcss

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

My upload.php file saves images into an uploads/ folder within my main directory. I am looking to dynamically add a new li tag to my index file each time an image successfully uploads. Here is a snippet from index.php: <ul> <li><im ...

javascriptphphtmlimagehtml-lists

Angular child component displaying of table data is not looping properly

Currently, I am using Angular 13 along with Bootstrap 3 to develop an application that consists of two main components: form-component (dedicated to inputting user details) and list-component (designed to showcase all data in a table format). Within the HT ...

javahtmlangulartypescript

What could be causing the excessive vertical spacing in an HTML list on Chrome: PHP output or CSS styling?

I'm having difficulty understanding why there is a significant vertical offset (around 170px) between one <li> element and the next. This issue seems to only occur in Chrome and not in Firefox, specifically within <li> elements when PHP co ...

phphtmlcsswordpress

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

I'm currently working with the Form.IO JS library to develop a new form. Within this form, I need to include a DataGrid containing 11 components. To ensure all components fit inline, I have applied the CSS rule overflow: auto (overflow-x: auto; overfl ...

javascriptjquerycssformio

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...

javascripthtmljsoncordova

Creating a reference to a hyperlink or button in a variable

I am currently working on creating a login form for a school project website. The section that is posing a challenge for me is determining if I can assign a variable to a href or button. For instance, imagine that the href has the variable 'A' ...

phphtmlcssbuttonhref

Looking for assistance with transferring a data attribute to a form redirection

I'm seeking assistance with a coding dilemma I've encountered. To provide some background, I have a list of items on my website, each featuring a 'Book Now' button that redirects users to different pages. Recently, I incorporated a mod ...

javascriptjqueryhtmlformsexpressionengine

Is it impossible to create links to any Django admin templates other than index.html?

Currently working on setting up a link that directs users to Django's admin/auth/user/add/ in order to allow them to create a new account for logging in. However, I have encountered an issue where setting href="{% url 'admin:index' %}& ...

htmldjango

Bootstrap 4 is not functioning properly with 5 columns per row

Is there a way to create a grid with 5 columns in a row using Bootstrap 4? This is what I have tried: <div class="row"> <div class="col col1"></div> <div class="col col2"></div> <div class="col col ...

twitter-bootstrapbootstrap-4

JavaScript/CSS memory matching game

Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...

javascriptcss

What is the best way to transfer a variable between components in Angular without using the HTML page, directly within the components themselves?

Within the child component, I am working with a string: @Input() helloMessage:string; I am looking to assign a value to this string from another string in the parent component and utilize it within the child component without displaying the value in the h ...

angulartypescriptvariablesinputcomponents

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

javascripthtmlcsscss-position

What is the best way to align two round buttons on each line with a single button centered above them, all without any spacing between the buttons below, and vice versa

https://i.sstatic.net/oOwY6.png Is it possible to align the buttons on the left side like they appear on the right? Each group should have padding and display with flow-root. .group { display: flow-root; padding: 7px 0px 7px 0px; } button.a { ...

htmlcssbuttoncss-selectorscenter

Pictures glide within containers

Hey, I'm having an issue with my images. They're not floating like they should be, even though they are centered in the div. I really want them to float and be centered. Here's the code snippet I've been working with. HTML <div cla ...

htmlcss

Unexpected Issues with the Ant Design Sidebar Layout Demo

My React webapp is utilizing the Ant design component framework version 4. I attempted to integrate this example from the Antd documentation into my webapp: https://codesandbox.io/s/ymspt However, when I implemented the code in my webapp, the result didn ...

javascriptcssreactjsantd