logo
down
shadow

Vertical align input elements with different size label


Vertical align input elements with different size label

By : FedericoUY
Date : November 14 2020, 04:48 PM
I wish this helpful for you Actually I just found the solution I was looking for in here, so using:
code :
.row{
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
form .row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: row nowrap;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}


Share : facebook icon twitter icon
Align label and input vertical

Align label and input vertical


By : Maverick
Date : March 29 2020, 07:55 AM
help you fix your problem I don't believe the grid system is intended for use on labels and input fields.
Instead of applying grid_X class directly to label and field, you should apply to
that wraps around these input and labels, OR customize the grid class by defining input.grid_x and adjust the width.
Align 6 elements at 1 line (Label+Input, Label+Input, Label+Input)

Align 6 elements at 1 line (Label+Input, Label+Input, Label+Input)


By : ishak ishq
Date : March 29 2020, 07:55 AM
hop of those help? I wanted to create a view that will capture user's input. I have many fields to be included. Basically I separate them into 3 fields at the same time horizontally. Here's the sample image. , If this is your raw HTML:
code :
<form action="">
  <p>First Name</p>
  <input type="text" name="fname" />
  <p>Middle Name</p>
  <input type="text" name="mname" />
  <p>Last Name</p>
  <input type="text" name="lname" />
  <p>Age</p>
  <input type="text" name="age" />
  <p>Gender</p>
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <p>Phone Number</p>
  <input type="text" name="fname" />
</form>
Bootstrap, align input with label to button without label, vertical form / not horizontal

Bootstrap, align input with label to button without label, vertical form / not horizontal


By : chefBirdly
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Bootstrap is a great structure in which you can create any kind of html just you need to understand the structure. Always try to use only bootstrap classes but not the external things.
Check this bootstrap only structure with the desired output
code :
<div class='container' style='width:200px; margin: 50px;'>
  <div class="row">
    <div class="col-lg-12">
      <label>Name</label>
      <div class="row">
        <div class="col-xs-10">
          <div class="form-group">
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-xs-2">
          <div class="form-group">
            <div class="btn btn-danger">Remove</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Vertical align checkbox/radio input with their label

Vertical align checkbox/radio input with their label


By : E. Stubbs
Date : March 29 2020, 07:55 AM
Any of those help How can I vertically align my checkboxes with their label in bootstrap v4? I have the following example: , Add a class name .container to your label and style as follows:
code :
 .container {
      display: table;
      vertical-align: middle;
    }

    .custom-control-indicator {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top:0;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="form-group has-success">
    <label class="custom-control custom-checkbox  container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <div class="form-group has-warning">
    <label class="custom-control custom-checkbox container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <div class="form-group has-danger">
    <label class="custom-control custom-checkbox container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <style>
    .container {
      display: table;
      vertical-align: middle;
    }
    
    .container  .custom-control-indicator {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top:0;
    }
  </style>
</body>

</html>
Vertical Align Radio and Checkbox Button Labels and Input Elements

Vertical Align Radio and Checkbox Button Labels and Input Elements


By : kris Green
Date : March 29 2020, 07:55 AM
Any of those help Flexbox is magical and it's going to change your life. I haven't used float in my code for the past year and I'm loving it! LOL
In the example below I apply flex to the parent container that holds the input and label. justify-content aligns everything to the left while align-items perfectly centers all children inside.
code :
ul{
  list-style-type:none;
}

.newsletter-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
<ul>
  <li class="newsletter-row">
     <input type="checkbox" id="css_nl" value="css" name="css_news">
     <label for="css_nl">CSS News</label>
  </li>
</ul>
shadow
Privacy Policy - Terms - Contact Us © ourworld-yourmove.org