Tips for aligning inputs vertically and stretching them horizontally with bootstrap flex only

For a practice exercise, I want to achieve vertical left alignment and horizontal stretching of input fields using only Bootstrap Flex (or CSS3 flexbox), without relying on Bootstrap Grid or CSS3 grid layout.

Here is the code snippet (also available on codepen.io)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row">
  <div class="flex-fill"><label>Field ABC 1</label></div>
  <div class="flex-fill"><input   type="text" /></div>
      </div>

Here is the visual representation of the code

https://i.sstatic.net/8BOBs.png

I have attempted using align-self-* on the item divs without success. I also experimented with applying the class directly to the input elements.

Subsequently, I removed the divs around the labels and inputs. Now, they stretch horizontally, but the vertical alignment remains unchanged.

The current outcome of the code looks like this

https://i.sstatic.net/iPhow.png

As a secondary question, I have placed each input and label within a div. Is this approach technically correct, good practice, or is it considered excessive in terms of HTML/CSS conventions?

htmlcssbootstrap-4flexbox

Answer №1

Unable to completely solve the issue using Bootstrap Flex alone, I turned to CSS3 Flexbox for partial success.

By removing the .flex-fill class (which Bootstrap uses to set 

flex: auto 1 1</code), and instead utilizing the <code>flex-basis: <size>
property, I was able to manipulate the layout. Additionally, incorporating justify-content-between helped align inputs to the right.

View on Codepen

Code:

input {
  flex-basis: 50%; /* default auto */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row justify-content-between">
  <label>Field ABC 1</label>
  <input type="text" />
      </div>
      <div class="d-flex flex-row justify-content-between">
  <label>Field Long DEF 123 </label>
  <input type="text" />
      </div>
      <div class="d-flex flex-row justify-content-between">
  <label>Field3 </label>
  <input type="text" />
      </div>
    </div>

Regarding your second inquiry: minimizing unnecessary divs can aid in reducing the size of your DOM and boosting performance.

Answer №2

.flex-c input{
width:80%;
  height:50px;
}
.flex-c label{
width:18%}
.flex-c{
  align-items:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row flex-c">
  <label>Field ABC 1</label>
  <input type="text" />
      </div>
      <div class="d-flex flex-row flex-c">
        <label>Field Long DEF 123 </label>
  <input type="text" />
      </div>
      <div class="d-flex flex-row flex-c">
  <label>Field3</label>
  <input type="text" />
      </div>
    </div>

just made some modifications!

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

What is the process for transferring information from HTML to Python and then receiving the output in HTML?

I am completely unfamiliar with the connection between HTML and Python, so I am reaching out for some assistance. I hope that someone here can lend me a hand. Currently, my HTML is hosted on an Apache server, and I access the website using the address "". ...

javascriptjquerypythonhtmldjango

Validation can only be performed one tab at a time

I have utilized BootstrapWizard to create a wizard, but I am in need of validating the input before proceeding to save them. Currently, when I complete the first tab, I am unable to move on to the next tab because the valid() method returns false. The val ...

jquerybootstrap-4twitter-bootstrap-wizard

The background color of social media links spills over onto other links, creating a messy overlap

I have been trying to confine the teal hover effect within the boundaries of my social media links. Despite adjusting padding, heights, and widths using CSS properties, the hover effect still extends beyond the right border. Here is how it appears without ...

htmlcss

Excessive Empty Area beneath <td>

I'm currently working on creating an e-book and I have encountered a concerning issue. The <figure> and <figcaption> elements are appearing as unknown tags in Sigil. To work around this problem, I decided to use a <table> for display ...

htmlcssepub

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

jqueryhtmlcsstwitter-bootstrap-3summernote

Transfer information from a click event to a jQuery function

Having some trouble passing a C# list parameter to a jQuery method using onclick. It seems like the brackets [] and special characters in the string values are causing issues. For example, a string in the list might look like "*abc/def-". Any help would b ...

htmljqueryonclick

The "Next" button fails to function after a replay has been completed

I created a small quiz app to practice my JS skills. Everything seems to be working fine, except for one issue - when I click on replay, the quiz box shows up but the 'Next' button stops functioning. There are no console errors and I'm strug ...

javascriptbootstrap-4

Transport the unique identifier of the table row

After retrieving the list of followers from Instagram and storing it in an array in a session, I am displaying the data in a tabular format. <table class="tablesorter" cellspacing="0"> <thead> <tr> <th>&l ...

javascriptphpjqueryhtmlajax

Alignment of images at the center within a container div while maintaining a height of 100%

Apologies if this question has already been addressed - I have tried numerous methods to center images horizontally without success. This particular image just does not want to align in the center! For reference, here is the JSFiddle link HTML: (Please n ...

htmlcssimage

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Can anyone help me retrieve the tooltip text that appears when I hover over the time indicating how long ago a game was played? You can find my summoner profile here. I have noticed that the tooltip text is not visible in the HTML code and suspect it may ...

javascriptpythonhtmlselenium

Changing an HTML container using jQuery and Ajax to facilitate a login process

Currently, I am on the lookout for a unique jQuery plugin that can replace a div when a successful login occurs. Despite searching multiple times on Google, I have been unable to find an ideal plugin that meets my specific needs. Do any of you happen to kn ...

jqueryajaxhtmlloading

Use CSS to apply hover effects to multiple sections of text at the same time

Is there a way in CSS to apply the hover state to one part of HTML text when another part is hovered over, both sharing the same class? I have a block of text in HTML that is broken down into individual words, each word linked to a specific CSS class. It ...

htmlcss

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

cssangulartwitter-bootstrap

Responsive design not functioning properly for Bootstrap columns on website

If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design? I attempted using Bootstrap by setting the top 3 images as <div className="col-md-4"> and t ...

htmlcssreactjsbootstrap-4

What is the most strategic way to conceal this overlay element?

Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...

javascriptjqueryhtml

How can I use Bootstrap and PHP to style future posts in separate rows on a website?

I am attempting to design a categories navigation menu using Bootstrap 5. It consists of two columns, the first displaying featured posts and the second showing 5 recent posts. Here is an example of what I have tried, but it didn't work as expected b ...

phpcsstwitter-bootstrapbootstrap-5

Transferring Data Between Two Modals

Currently working on developing an approval/edit process for the company website. The setup involves a jquery datatable that showcases scheduled events specific to the logged-in user in a particular format. results = await response.json(); var tr = $(this) ...

htmljquerybootstrap-4datatables

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

javascriptjqueryhtmlcssw3.css

What is the best way to activate a JavaScript function once a page has finished loading?

Hey there! I have a webpage with 2 text input fields and a DIV element. The first input field is for user input, while the second one is readonly. When the user hits Enter in the first input field, a new page loads into the DIV based on the query result f ...

javascriptphphtml

The draggable() function in jQuery and the ng-repeat directive in Angular make for a powerful combination

The code snippet I have is as follows. HTML <div ng-repeat="item in canvasElements" id="declareContainer"> {{item}} </div> Javascript (Angular) (function(){ //angular module var dataElements = angular.module('dataElements' ...

jqueryhtmlangularjsjquery-ui