Twitter Bootstrap Question posted in

How to vertically align and horizontally stretch multiple inputs using only bootstrap flex?-Twitter bootstrap

As a learning exercise, I would like to use only Bootstrap Flex (or CSS3 flexbox) to vertically left-align and horizontally stretch the input fields. I know about Bootstrap Grid (and CSS3 grid layout) but I do not want to use that.

Here’s the code (also 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>
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field Long DEF 123 </label></div>
		  <div class="flex-fill align-self-stretch"><input type="text" /></div>
      </div>
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field3</label></div>
		  <div class="flex-fill align-self-stretch"><input type="text" /></div>
      </div>
    </div>

And that looks something like this

enter image description here

I’ve tried align-self-* on the item divs but without any luck. I also tried putting the class directly on the input.

Then I removed the div’s around the labels and inputs. Now they stretch horizontally but still no vertical alignment.

And now the result looks like this

enter image description here

As a sub-question, I’ve wrapped each input (and each label) in a div. Is that correct / good / recommended (in terms of how Html / CSS is meant to work technically) or is it overkill?

Tags:

2

Answers


  1. 0 
    .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 removed some classes!

    Login or Signup to reply.
  2. 0

    So I couldn’t solve it using only Bootstrap Flex, but I did it partially with help of CSS3 Flexbox.

    I basically removed .flex-fill (Bootstrap sets it to have flex: auto 1 1 which we do not want) and used flex-basis: <size> property instead. And I used justify-content-between to align inputs to the right.

    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>

    And about your second question: avoid unnecesary divs, they make your DOM bigger and slow the performance.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search